:root {
  --slate-950: #000;
  --slate-900: #12141d;
  --slate-800: #24262e;
  --slate-700: #4f5159;
  --slate-600: #666871;
  --slate-400: #9a9ca4;
  --slate-300: #c6c8ce;
  --slate-200: #dedfe3;
  --slate-100: #eef0f1;
  --slate-50: #f7f8f8;
  --cyan-700: #756c30;
  --cyan-300: #fffac0;
  --cyan-200: #ffdfd8;
  --cyan-100: #f0e9f9;
  --auto-ink: #171719;
  --auto-surface: #f7f8f8;
  --auto-canvas: #d7d9da;
  --auto-line: rgb(23 23 25 / 0.16);
  --auto-gradient: linear-gradient(100deg, #fffac0, #ffdfd8);
}

html {
  background: #000;
  scroll-padding-top: 80px;
}

body {
  background: var(--auto-canvas);
  color: var(--auto-ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #fffac0;
  color: #171719;
}

* {
  scrollbar-color: #666871 #000;
}

*::-webkit-scrollbar-track {
  background: #000;
}

*::-webkit-scrollbar-thumb {
  border-color: #000;
  background: #666871;
}

*::-webkit-scrollbar-thumb:hover {
  background: #fffac0;
}

.container {
  width: min(calc(100% - 40px), 1180px);
}

.section {
  padding: clamp(82px, 9vw, 130px) 0;
}

.hero {
  min-height: calc(100svh - 80px);
  background: #000;
}

.hero::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.96) 0%, rgb(0 0 0 / 0.84) 46%, rgb(0 0 0 / 0.38) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.94)),
    radial-gradient(circle at 18% 18%, rgb(255 250 192 / 0.11), transparent 34%),
    radial-gradient(circle at 82% 24%, rgb(240 233 249 / 0.1), transparent 32%);
}

.hero-photo {
  opacity: 0.58;
  filter: saturate(0.72) contrast(1.06);
}

.hero-grid {
  min-height: calc(100svh - 80px);
  gap: clamp(42px, 6vw, 76px);
  padding: clamp(64px, 8vw, 94px) 0;
}

h1 {
  font-size: clamp(45px, 5.35vw, 77px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.hero-copy {
  max-width: 650px;
  color: #d4d5d9;
  font-size: clamp(17px, 1.75vw, 21px);
  line-height: 1.55;
}

.hero-line {
  color: #fff;
  font-size: 18px;
}

.btn {
  min-height: 48px;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 700;
}

.btn-primary,
.btn-primary:hover {
  background: var(--auto-gradient);
  color: var(--auto-ink);
}

.btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.22);
}

.btn-ghost {
  border-color: rgb(255 250 192 / 0.62);
  background: transparent;
}

.btn-ghost:hover {
  background: #fffac0;
  color: var(--auto-ink);
}

.visual {
  border-color: rgb(255 255 255 / 0.14);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.32);
}

.visual::before {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.03), rgb(0 0 0 / 0.76)),
    radial-gradient(circle at 82% 18%, rgb(255 223 216 / 0.12), transparent 38%);
}

.visual-kicker {
  border-color: rgb(255 250 192 / 0.36);
  background: rgb(0 0 0 / 0.64);
  color: #fffac0;
}

.assistant-card {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(18 20 29 / 0.78);
  box-shadow: 0 22px 54px rgb(0 0 0 / 0.36);
}

.icon-box {
  border-radius: 8px;
  background: var(--auto-gradient);
}

.chat-line.answer {
  background: rgb(255 250 192 / 0.12);
  color: #f7f8f8;
}

.chat-line.answer strong {
  color: #fffac0;
}

.section-header {
  max-width: 900px;
  margin: 0 0 54px;
  text-align: left;
}

.section-header h2,
.split h2,
.cta h2 {
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.section-header p,
.split p,
.cta p {
  max-width: 700px;
  color: var(--slate-600);
  font-size: 18px;
  line-height: 1.6;
}

.moment-strip {
  gap: 14px;
}

.moment-strip figure,
.moment-strip figcaption,
.assist-photo-wrap,
.split-photo-wrap {
  border-radius: 12px;
}

.moment-strip figure,
.split-photo-wrap {
  box-shadow: none;
}

.dark {
  background: #000;
}

.dark .section-header h2 {
  color: #fff;
}

.dark .section-header p {
  color: #b9bbc1;
}

.assist-card {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 0;
  background: transparent;
  padding: 28px 0;
}

.assist-card:hover {
  background: transparent;
}

.assist-card-featured {
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
  background: linear-gradient(100deg, rgb(255 250 192 / 0.08), rgb(240 233 249 / 0.06));
}

.assist-feature-copy {
  padding-right: clamp(24px, 4vw, 44px);
}

.qr-proof span,
.qr-demo-placeholder,
.value {
  border-radius: 8px;
  background: rgb(255 250 192 / 0.08);
}

.qr-proof span {
  border-color: rgb(255 250 192 / 0.2);
  color: #fffac0;
}

.qr-demo-placeholder {
  border-color: rgb(255 250 192 / 0.28);
}

.more-assistants-details {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 0;
  background: transparent;
}

.more-module-icon {
  border-radius: 8px;
  background: var(--auto-gradient);
}

.implementation {
  background: var(--auto-surface);
}

.pilot-compact,
.implementation-chart {
  border-radius: 0;
  box-shadow: none;
}

.pilot-step > .pilot-step-number {
  border-radius: 8px;
  background: var(--auto-gradient);
}

.pilot-step:not(:last-child)::after {
  background: #fffac0;
}

.cta-wrap {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.94), rgb(0 0 0 / 0.82)),
    url("/images/automotive/service-bay-1600.webp") center / cover;
}

.cta {
  padding: clamp(52px, 7vw, 82px) 0;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.22);
  border-bottom: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.demo-form-section {
  background: #000;
}

.demo-form-section h2 {
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 500;
  letter-spacing: -0.055em;
}

.blinkin-iframe {
  border-radius: 16px;
  filter: grayscale(0.72) saturate(0.42) contrast(0.98);
}

.partner-strip {
  border-top-color: var(--auto-line);
  background: var(--auto-canvas);
  color: var(--auto-ink);
}

.partner-strip h2 {
  color: var(--auto-ink);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.feature-chip {
  border: 0;
  border-top: 1px solid var(--auto-line);
  border-radius: 0;
  background: transparent;
  color: #555860;
  padding: 16px 0 0;
}

.feature-chip svg {
  color: #756c30;
}

.feature-chip strong {
  color: var(--auto-ink);
}

.partner-logo-card {
  border-color: var(--auto-line);
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .hero-grid {
    min-height: auto;
    padding: 64px 0 86px;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 28px), 1180px);
  }

  .section {
    padding: 72px 0;
  }

  h1 {
    font-size: clamp(43px, 13vw, 58px);
  }

  .section-header h2,
  .split h2,
  .cta h2,
  .demo-form-section h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .visual {
    min-height: 440px;
  }

  .assist-feature-copy {
    padding: 0 0 32px;
  }

  .cta {
    padding: 42px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}