/* ── Onboarding Preview — Component Styles ── */
/* Phone mockup styles for homepage showcase */

:root {
  --dark-bg: #0D0D0D;
  --dark-surface: #1A1A1A;
  --light-bg: #F5F5F7;
}

/* ── Homepage Preview Container ── */
/* Break out of <main> max-width to go full viewport width */
.onboarding-preview {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 0 0;
}
.onboarding-preview::-webkit-scrollbar { display: none; }
.onboarding-preview .screen-row {
  padding: 0 2rem;
}

/* Reset inherited styles from style.css so phones match design.html */
.onboarding-preview {
  line-height: normal;
  color: white;
}
/* .hero h1 leaks font-style, margin-bottom, animation into phone frames */
.onboarding-preview h1 {
  font-style: normal;
  margin-bottom: 0;
  animation: none;
  line-height: inherit;
}
.onboarding-preview h2,
.onboarding-preview h3,
.onboarding-preview h4 {
  line-height: inherit;
}
.onboarding-preview a {
  color: inherit;
  transition: none;
}
.onboarding-preview a:hover {
  color: inherit;
}

  .screen-row {
    display: flex;
    gap: 36px;
    overflow-x: auto;
    padding-bottom: 16px;
    scrollbar-width: none;
    width: 100%;
    justify-content: center;
  }
  .screen-row::-webkit-scrollbar { display: none; }

  /* ── Device Frame ── */
  .device-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .device-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #636366;
  }

  .device-label .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white;
    font-size: 11px;
    font-weight: 800;
  }

  .frame {
    width: 393px;
    height: 852px;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  .frame.dark-frame {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06),
      0 40px 100px rgba(0,0,0,0.6),
      0 0 80px rgba(0,122,255,0.06),
      inset 0 0 0 1px rgba(255,255,255,0.02);
  }

  .frame.light-frame {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.08),
      0 40px 100px rgba(0,0,0,0.2),
      0 0 60px rgba(0,122,255,0.04);
  }

  .screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  /* ── Backgrounds ── */
  .bg-dark-1 {
    background: var(--dark-bg);
  }
  .bg-dark-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 120% 80% at 20% 0%, rgba(0,122,255,0.15), transparent 60%),
      radial-gradient(ellipse 100% 60% at 80% 100%, rgba(139,92,246,0.12), transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,122,255,0.04), transparent);
    animation: bgShift 12s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .bg-dark-2 {
    background: var(--dark-bg);
  }
  .bg-dark-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 70% at 60% 0%, rgba(139,92,246,0.1), transparent 60%),
      radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,122,255,0.08), transparent 60%);
    animation: bgShift 11s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .bg-dark-3 {
    background: var(--dark-bg);
  }
  .bg-dark-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 70% at 50% 30%, rgba(52,199,89,0.1), transparent 60%),
      radial-gradient(ellipse 80% 60% at 30% 70%, rgba(0,122,255,0.1), transparent 60%),
      radial-gradient(ellipse 60% 40% at 70% 20%, rgba(139,92,246,0.08), transparent);
    animation: bgShift 10s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .bg-light-1 {
    background: var(--light-bg);
  }
  .bg-light-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 120% 80% at 20% 0%, rgba(0,122,255,0.07), transparent 60%),
      radial-gradient(ellipse 100% 60% at 80% 100%, rgba(139,92,246,0.05), transparent 60%);
    animation: bgShift 12s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .bg-light-2 {
    background: var(--light-bg);
  }
  .bg-light-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 70% at 60% 0%, rgba(139,92,246,0.05), transparent 60%),
      radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,122,255,0.04), transparent 60%);
    animation: bgShift 11s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .bg-light-3 {
    background: var(--light-bg);
  }
  .bg-light-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 70% at 50% 30%, rgba(52,199,89,0.06), transparent 60%),
      radial-gradient(ellipse 80% 60% at 30% 70%, rgba(0,122,255,0.06), transparent 60%);
    animation: bgShift 10s ease-in-out infinite alternate;
    pointer-events: none;
  }

  @keyframes bgShift {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.1) rotate(2deg); }
  }

  /* ── Floating Particles ── */
  .particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }

  .particle {
    position: absolute;
    border-radius: 50%;
    animation: float linear infinite;
    opacity: 0;
  }

  .particle.dark {
    background: radial-gradient(circle, rgba(0,122,255,0.3), transparent 70%);
  }

  .particle.light {
    background: radial-gradient(circle, rgba(0,122,255,0.15), transparent 70%);
  }

  @keyframes float {
    0% { transform: translateY(100%) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100%) scale(1); opacity: 0; }
  }

  /* ── Status Bar ── */
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px 0;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
    height: 54px;
    position: relative;
    z-index: 2;
  }

  .status-bar.dark { color: white; }
  .status-bar.light { color: #1C1C1E; }
  .sb-icons { display: flex; gap: 5px; }
  .sb-icons svg { width: 17px; height: 17px; }
  .status-bar.dark .sb-icons svg { fill: white; }
  .status-bar.light .sb-icons svg { fill: #1C1C1E; }

  /* ── Bottom Nav ── */
  .bottom-nav {
    flex-shrink: 0;
    padding: 0 24px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
  }

  .dots {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .dot {
    height: 6px;
    border-radius: 9999px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dot.active {
    width: 24px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
  }

  .dot.inactive-dark { width: 6px; background: #2A2A2E; }
  .dot.inactive-light { width: 6px; background: #D1D1D6; }

  .nav-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
  }

  .btn-back {
    flex: 1;
    height: 48px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    letter-spacing: 0.01em;
  }

  .btn-back.dark {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .btn-back.light {
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    color: #3A3A3C;
  }

  .btn-next {
    flex: 1;
    height: 48px;
    background: linear-gradient(135deg, var(--blue) 0%, #6366F1 55%, var(--purple) 100%);
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 16px rgba(0,122,255,0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    letter-spacing: 0.01em;
  }

  .btn-next.full { flex: unset; width: 100%; }

  .btn-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  .btn-next svg { width: 16px; height: 16px; fill: white; position: relative; z-index: 1; }

  .skip-link {
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.2s;
    letter-spacing: 0.02em;
  }

  .skip-link.dark { color: #48484A; }
  .skip-link.light { color: #AEAEB2; }

  /* ════════════════════════════════════════════════ */
  /*       SCREEN 1: WELCOME + VALUE                 */
  /* ════════════════════════════════════════════════ */

  .welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 24px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  /* ── Compact Welcome Header (avatar + text inline) ── */
  .welcome-header-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 6px;
    margin-bottom: 10px;
    animation: fadeIn 0.6s 0.2s var(--ease-out-expo) both;
  }

  .otto-avatar-sm {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .otto-avatar-sm .glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,122,255,0.25), transparent 70%);
    animation: breathe 4s ease-in-out infinite;
  }

  .otto-avatar-sm .body {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a6dff 0%, #7c4dff 60%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 4px 16px rgba(0,122,255,0.3);
    animation: avatarFloat 6s ease-in-out infinite;
  }

  .otto-avatar-sm .body svg {
    width: 20px;
    height: 20px;
    fill: white;
  }

  @keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
  }

  @keyframes avatarFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  .welcome-header-text h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.3px;
    line-height: 1.1;
  }
  .welcome-header-text h1.dark { color: white; }
  .welcome-header-text h1.light { color: #1C1C1E; }

  .welcome-header-text .tagline {
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 2px;
  }
  .welcome-header-text .tagline.dark { color: rgba(255,255,255,0.4); }
  .welcome-header-text .tagline.light { color: #8E8E93; }

  /* ── OBD-II Gauge Card ── */
  .obd-card {
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 6px;
  }

  .obd-card.dark {
    background: rgba(139,92,246,0.06);
    border: 1px solid rgba(139,92,246,0.12);
  }

  .obd-card.light {
    background: rgba(139,92,246,0.04);
    border: 1px solid rgba(139,92,246,0.08);
  }

  .obd-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .obd-header.dark { color: rgba(139,92,246,0.8); }
  .obd-header.light { color: rgba(139,92,246,0.9); }

  .obd-header svg { width: 12px; height: 12px; fill: var(--purple); }

  .obd-gauges {
    display: flex;
    gap: 6px;
  }

  .obd-gauge {
    flex: 1;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
  }

  .obd-gauge.dark { background: rgba(255,255,255,0.04); }
  .obd-gauge.light { background: rgba(0,0,0,0.03); }

  .obd-gauge .gauge-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  .obd-gauge.dark .gauge-label { color: rgba(255,255,255,0.35); }
  .obd-gauge.light .gauge-label { color: rgba(0,0,0,0.35); }

  .obd-gauge .gauge-value {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .obd-gauge .gauge-value.warn { color: var(--amber); }
  .obd-gauge .gauge-value.ok { color: var(--green); }
  .obd-gauge .gauge-value.info { color: var(--blue); }

  .obd-gauge .gauge-unit {
    font-size: 9px;
    font-weight: 500;
  }

  .obd-gauge.dark .gauge-unit { color: rgba(255,255,255,0.3); }
  .obd-gauge.light .gauge-unit { color: rgba(0,0,0,0.3); }

  /* ── Savings Card ── */
  .savings-card {
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .savings-card.dark {
    background: rgba(52,199,89,0.06);
    border: 1px solid rgba(52,199,89,0.12);
  }

  .savings-card.light {
    background: rgba(52,199,89,0.04);
    border: 1px solid rgba(52,199,89,0.08);
  }

  .savings-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(52,199,89,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .savings-icon svg { width: 18px; height: 18px; fill: var(--green); }

  .savings-info { flex: 1; }

  .savings-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--green);
    line-height: 1.1;
  }

  .savings-label {
    font-size: 10.5px;
    font-weight: 600;
  }

  .savings-label.dark { color: rgba(255,255,255,0.5); }
  .savings-label.light { color: rgba(0,0,0,0.45); }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Chat Preview ── */
  .chat-preview {
    width: 100%;
    border-radius: 20px;
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
    animation: chatSlideUp 0.6s 0.3s var(--ease-out-expo) both;
  }

  .chat-preview.dark {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
  }

  .chat-preview.light {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.04);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  }

  /* Allow scrolling for longer chat conversation */
  .chat-preview {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .chat-preview::-webkit-scrollbar { display: none; }

  @keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Chat message (shared animation) ── */
  .chat-msg {
    opacity: 0;
    transform: translateY(10px);
  }

  .chat-msg.anim-in {
    animation: msgIn 0.45s var(--ease-out-expo) forwards;
  }

  @keyframes msgIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── User bubble (right-aligned, gradient) ── */
  .chat-bubble-user {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 18px;
    border-bottom-right-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    align-self: flex-end;
    background: linear-gradient(135deg, #007AFF, #6366F1);
    color: white;
    box-shadow: 0 3px 12px rgba(0,122,255,0.2);
  }

  /* ── Agent response (full-width, plain, no bubble) ── */
  .agent-response {
    width: 100%;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .agent-response.dark { color: rgba(255,255,255,0.8); }
  .agent-response.light { color: #3C3C43; }

  .agent-response .agent-text {
    font-size: 12px;
    line-height: 1.45;
  }

  /* Bot header (used inside agent-response) */
  .bot-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
  }

  .bot-avatar-sm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .bot-avatar-sm svg { width: 9px; height: 9px; fill: white; }

  .bot-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
  }

  /* Typing indicator */
  .typing-indicator {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 16px;
  }

  .typing-indicator.dark {
    background: rgba(255,255,255,0.04);
  }

  .typing-indicator.light {
    background: rgba(0,0,0,0.03);
  }

  /* ── Mini Chart (SVG sparkline in OBD card) ── */
  .obd-chart-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
  }

  .mini-chart-wrap {
    flex: 1;
    border-radius: 8px;
    padding: 6px 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .mini-chart-wrap.dark { background: rgba(255,255,255,0.03); }
  .mini-chart-wrap.light { background: rgba(0,0,0,0.02); }

  .mini-chart-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mini-chart-label .mc-name {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .mini-chart-label.dark .mc-name { color: rgba(255,255,255,0.35); }
  .mini-chart-label.light .mc-name { color: rgba(0,0,0,0.35); }

  .mini-chart-label .mc-value {
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .mini-chart-label .mc-value.warn { color: var(--amber); }
  .mini-chart-label .mc-value.ok { color: var(--green); }
  .mini-chart-label .mc-value.info { color: var(--blue); }

  .mini-chart-svg {
    width: 100%;
    height: 28px;
    display: block;
  }

  .typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
  }

  .typing-dot.dark { background: rgba(255,255,255,0.3); }
  .typing-dot.light { background: rgba(0,0,0,0.2); }

  .typing-dot:nth-child(2) { animation-delay: 0.15s; }
  .typing-dot:nth-child(3) { animation-delay: 0.3s; }

  @keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
  }

  /* Diagnostic card */
  .diag-card {
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  .diag-card.dark { background: rgba(0,122,255,0.06); border: 1px solid rgba(0,122,255,0.1); }
  .diag-card.light { background: rgba(0,122,255,0.04); border: 1px solid rgba(0,122,255,0.08); }

  .diag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 500;
  }

  .diag-row.dark { color: rgba(255,255,255,0.75); }
  .diag-row.light { color: #3C3C43; }

  .diag-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .diag-icon svg { width: 10px; height: 10px; }
  .diag-icon.warn { background: rgba(255,159,10,0.12); }
  .diag-icon.warn svg { fill: var(--amber); }
  .diag-icon.ok { background: rgba(52,199,89,0.12); }
  .diag-icon.ok svg { fill: var(--green); }
  .diag-icon.info { background: rgba(0,122,255,0.12); }
  .diag-icon.info svg { fill: var(--blue); }

  /* ── Social Proof ── */
  .social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 0 2px;
    animation: fadeIn 0.8s 1.2s var(--ease-out-expo) both;
  }

  .proof-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
  }

  .proof-chip.dark {
    background: rgba(255,255,255,0.04);
    color: #8E8E93;
    border: 1px solid rgba(255,255,255,0.04);
  }

  .proof-chip.light {
    background: rgba(0,0,0,0.03);
    color: #6E6E73;
    border: 1px solid rgba(0,0,0,0.04);
  }

  .proof-chip svg { width: 12px; height: 12px; }
  .proof-chip .star svg { fill: #FF9F0A; }
  .proof-chip .shield svg { fill: #34C759; }
  .proof-chip .manual svg { fill: #007AFF; }

  /* ════════════════════════════════════════════════ */
  /*       SCREEN 2: WHY OTTO (VALUE PROPS)          */
  /* ════════════════════════════════════════════════ */

  .value-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    position: relative;
    z-index: 1;
  }

  .value-header {
    text-align: center;
    padding: 24px 0 12px;
    flex-shrink: 0;
  }

  .value-header .value-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }

  .value-header .value-badge.dark {
    background: rgba(139,92,246,0.08);
    color: var(--purple);
    border: 1px solid rgba(139,92,246,0.12);
  }

  .value-header .value-badge.light {
    background: rgba(139,92,246,0.06);
    color: var(--purple);
    border: 1px solid rgba(139,92,246,0.08);
  }

  .value-header .value-badge svg { width: 12px; height: 12px; fill: var(--purple); }

  .value-header h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
  }
  .value-header h1.dark { color: white; }
  .value-header h1.light { color: #1C1C1E; }

  .value-header p {
    font-size: 14px;
    font-weight: 500;
  }
  .value-header p.dark { color: #636366; }
  .value-header p.light { color: #8E8E93; }

  /* ── Hero Stat ── */
  .hero-stat {
    text-align: center;
    padding: 18px 0 6px;
    flex-shrink: 0;
    animation: fadeIn 0.6s 0.15s var(--ease-out-expo) both;
  }

  .hero-number {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 54px;
    font-weight: 400;
    letter-spacing: -2px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 4px;
  }

  .hero-label {
    font-size: 13px;
    font-weight: 600;
  }
  .hero-label.dark { color: #636366; }
  .hero-label.light { color: #8E8E93; }

  .hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px 5px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    animation: fadeIn 0.6s 0.4s var(--ease-out-expo) both;
  }

  .hero-trust.dark {
    background: rgba(52,199,89,0.06);
    border: 1px solid rgba(52,199,89,0.1);
    color: var(--green);
  }

  .hero-trust.light {
    background: rgba(52,199,89,0.05);
    border: 1px solid rgba(52,199,89,0.08);
    color: #1B8C3A;
  }

  /* ── Value Cards (Enhanced) ── */
  .value-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    justify-content: center;
    padding: 0;
  }

  .value-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    padding-left: 18px;
    border-radius: 20px;
    transition: all 0.35s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
  }

  /* Left accent stripe */
  .value-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
  }

  .value-card.accent-blue::before { background: linear-gradient(180deg, var(--blue), rgba(0,122,255,0.2)); }
  .value-card.accent-purple::before { background: linear-gradient(180deg, var(--purple), rgba(139,92,246,0.2)); }
  .value-card.accent-green::before { background: linear-gradient(180deg, var(--green), rgba(52,199,89,0.2)); }

  .value-card.dark {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
  }

  .value-card.light {
    background: white;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }

  /* Animated icon with glow + ring */
  .vc-icon-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  .vc-icon-wrap .vc-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    animation: breathe 4s ease-in-out infinite;
  }

  .vc-icon-wrap.blue .vc-glow { background: radial-gradient(circle, rgba(0,122,255,0.2), transparent 70%); }
  .vc-icon-wrap.purple .vc-glow { background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%); }
  .vc-icon-wrap.green .vc-glow { background: radial-gradient(circle, rgba(52,199,89,0.2), transparent 70%); }

  .vc-icon-wrap .vc-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid;
    animation: ringPulse 3s ease-in-out infinite;
  }

  .vc-icon-wrap.blue .vc-ring { border-color: rgba(0,122,255,0.15); }
  .vc-icon-wrap.purple .vc-ring { border-color: rgba(139,92,246,0.15); }
  .vc-icon-wrap.green .vc-ring { border-color: rgba(52,199,89,0.15); }

  @keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.4; }
  }

  .vc-icon-inner {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: avatarFloat 6s ease-in-out infinite;
  }

  .vc-icon-inner svg { width: 24px; height: 24px; }
  .vc-icon-inner.blue { background: rgba(0,122,255,0.12); }
  .vc-icon-inner.blue svg { fill: var(--blue); }
  .vc-icon-inner.purple { background: rgba(139,92,246,0.12); }
  .vc-icon-inner.purple svg { fill: var(--purple); }
  .vc-icon-inner.green { background: rgba(52,199,89,0.12); }
  .vc-icon-inner.green svg { fill: var(--green); }

  /* Stagger float offsets */
  .value-card:nth-child(2) .vc-icon-inner { animation-delay: -2s; }
  .value-card:nth-child(3) .vc-icon-inner { animation-delay: -4s; }

  .vc-body { flex: 1; }

  .vc-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
  }

  .vc-title-row h3 {
    font-size: 15px;
    font-weight: 700;
  }
  .value-card.dark .vc-title-row h3 { color: white; }
  .value-card.light .vc-title-row h3 { color: #1C1C1E; }

  .vc-stat {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
  }

  .vc-stat.blue { background: rgba(0,122,255,0.1); color: var(--blue); }
  .vc-stat.purple { background: rgba(139,92,246,0.1); color: var(--purple); }
  .vc-stat.green { background: rgba(52,199,89,0.1); color: var(--green); }

  .vc-body > p {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
  }
  .value-card.dark .vc-body > p { color: #636366; }
  .value-card.light .vc-body > p { color: #8E8E93; }

  /* ── Mini savings comparison bars ── */
  .mini-compare {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
  }

  .compare-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .compare-label {
    width: 42px;
    flex-shrink: 0;
    text-align: right;
  }
  .value-card.dark .compare-label { color: rgba(255,255,255,0.4); }
  .value-card.light .compare-label { color: rgba(0,0,0,0.35); }

  .compare-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
  }
  .compare-bar-track.dark { background: rgba(255,255,255,0.04); }
  .compare-bar-track.light { background: rgba(0,0,0,0.04); }

  .compare-bar-fill {
    height: 100%;
    border-radius: 3px;
    animation: barGrow 1.2s var(--ease-out-expo) both;
  }

  .compare-bar-fill.dealer {
    background: linear-gradient(90deg, var(--amber), #FF6723);
    width: 90%;
    animation-delay: 0.6s;
  }

  .compare-bar-fill.diy {
    background: linear-gradient(90deg, var(--green), #2ecc71);
    width: 30%;
    animation-delay: 0.9s;
  }

  @keyframes barGrow {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
  }

  .compare-amount {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
  }
  .compare-amount.amber { color: var(--amber); }
  .compare-amount.green { color: var(--green); }

  /* ── Brand mini circles ── */
  .brand-mini-row {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    align-items: center;
  }

  .brand-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    animation: pillEnter 0.4s var(--ease-out-back) both;
  }

  .brand-mini:nth-child(1) { animation-delay: 0.5s; }
  .brand-mini:nth-child(2) { animation-delay: 0.6s; }
  .brand-mini:nth-child(3) { animation-delay: 0.7s; }
  .brand-mini:nth-child(4) { animation-delay: 0.8s; }
  .brand-mini:nth-child(5) { animation-delay: 0.9s; }

  .brand-mini.dark {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.04);
  }

  .brand-mini.light {
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.45);
    border: 1px solid rgba(0,0,0,0.04);
  }

  .brand-mini-more {
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
  }
  .brand-mini-more.dark { color: var(--purple); }
  .brand-mini-more.light { color: var(--purple); }

  /* ── Service Timeline (mini) ── */
  .service-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    padding-left: 2px;
    position: relative;
  }

  .service-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1.5px;
    border-radius: 1px;
  }

  .service-timeline.dark::before { background: rgba(255,255,255,0.06); }
  .service-timeline.light::before { background: rgba(0,0,0,0.06); }

  .service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 10.5px;
    font-weight: 600;
    position: relative;
  }

  .service-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
  }

  .service-item.done .service-dot {
    background: var(--green);
    box-shadow: 0 0 8px rgba(52,199,89,0.3);
  }

  .service-item.upcoming .service-dot {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255,159,10,0.3);
    animation: dotBlink 2s ease-in-out infinite;
  }

  @keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .service-item.done .svc-label.dark { color: rgba(255,255,255,0.45); }
  .service-item.done .svc-label.light { color: rgba(0,0,0,0.4); }
  .service-item.upcoming .svc-label.dark { color: var(--amber); }
  .service-item.upcoming .svc-label.light { color: #B8860B; }

  /* Stagger value cards - dramatic spring */
  .value-card:nth-child(1) { animation: valueCardEnter 0.6s 0.2s var(--spring) both; }
  .value-card:nth-child(2) { animation: valueCardEnter 0.6s 0.35s var(--spring) both; }
  .value-card:nth-child(3) { animation: valueCardEnter 0.6s 0.5s var(--spring) both; }

  @keyframes valueCardEnter {
    from { opacity: 0; transform: translateY(24px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ════════════════════════════════════════════════ */
  /*       SCREEN 3: VEHICLE SETUP                   */
  /* ════════════════════════════════════════════════ */

  .setup-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .setup-header {
    text-align: center;
    padding: 16px 28px 4px;
    flex-shrink: 0;
  }

  .setup-header .step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
  }

  .setup-header .step-badge.dark {
    background: rgba(0,122,255,0.08);
    color: var(--blue);
    border: 1px solid rgba(0,122,255,0.12);
  }

  .setup-header .step-badge.light {
    background: rgba(0,122,255,0.06);
    color: var(--blue);
    border: 1px solid rgba(0,122,255,0.08);
  }

  .setup-header .step-badge svg { width: 12px; height: 12px; fill: var(--blue); }

  .setup-header h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
  }
  .setup-header h1.dark { color: white; }
  .setup-header h1.light { color: #1C1C1E; }

  .setup-header p {
    font-size: 14px;
    font-weight: 500;
  }
  .setup-header p.dark { color: #636366; }
  .setup-header p.light { color: #8E8E93; }

  /* ── Brand Pills ── */
  .brand-section {
    flex-shrink: 0;
    padding: 14px 20px 4px;
  }

  .brand-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .brand-section-label.dark { color: #48484A; }
  .brand-section-label.light { color: #AEAEB2; }

  .brand-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .brand-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-expo);
    border: 1.5px solid transparent;
    position: relative;
  }

  .brand-pill.dark {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
  }

  .brand-pill.light {
    background: white;
    border-color: rgba(0,0,0,0.05);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  }

  .brand-pill.selected {
    border-color: var(--blue) !important;
  }

  .brand-pill.selected.dark {
    background: rgba(0,122,255,0.08);
    box-shadow: 0 0 20px rgba(0,122,255,0.12);
  }

  .brand-pill.selected.light {
    background: rgba(0,122,255,0.04);
    box-shadow: 0 0 20px rgba(0,122,255,0.08);
  }

  .brand-pill .pill-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.35s var(--ease-out-expo);
  }

  .brand-pill.dark .pill-icon { background: rgba(255,255,255,0.06); }
  .brand-pill.light .pill-icon { background: #F0F0F5; }
  .brand-pill.selected .pill-icon { background: rgba(0,122,255,0.15) !important; }

  .brand-pill .pill-icon svg { width: 14px; height: 14px; transition: all 0.35s var(--ease-out-expo); }
  .brand-pill.dark .pill-icon svg { fill: #636366; }
  .brand-pill.light .pill-icon svg { fill: #AEAEB2; }
  .brand-pill.selected .pill-icon svg { fill: var(--blue) !important; }

  .brand-pill .pill-name {
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s;
  }
  .brand-pill.dark .pill-name { color: rgba(255,255,255,0.7); }
  .brand-pill.light .pill-name { color: #3C3C43; }
  .brand-pill.selected .pill-name { color: var(--blue) !important; }

  /* Active check */
  .brand-pill .pill-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.35s var(--spring);
  }

  .brand-pill.selected .pill-check {
    transform: scale(1);
  }

  .brand-pill .pill-check svg { width: 10px; height: 10px; fill: white; }

  /* ── Section Divider ── */
  .section-divider {
    height: 1px;
    margin: 12px 24px;
    flex-shrink: 0;
  }
  .section-divider.dark { background: rgba(255,255,255,0.04); }
  .section-divider.light { background: rgba(0,0,0,0.04); }

  /* ── Model Section ── */
  .model-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 8px;
    scrollbar-width: none;
  }
  .model-section::-webkit-scrollbar { display: none; }

  .model-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .model-section-label.dark { color: #48484A; }
  .model-section-label.light { color: #AEAEB2; }

  .model-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .model-card {
    border-radius: 16px;
    border: 1.5px solid transparent;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
  }

  .model-card.dark {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.04);
  }

  .model-card.light {
    background: white;
    border-color: rgba(0,0,0,0.04);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  }

  .model-card.selected {
    border-color: var(--blue) !important;
  }

  .model-card.selected.dark {
    background: rgba(0,122,255,0.06);
    box-shadow: 0 0 24px rgba(0,122,255,0.1);
  }

  .model-card.selected.light {
    background: rgba(0,122,255,0.03);
    box-shadow: 0 2px 16px rgba(0,122,255,0.08);
  }

  /* Selection shimmer */
  .model-card.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,122,255,0.05), transparent);
    animation: cardShimmer 3s ease-in-out infinite;
  }

  @keyframes cardShimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
  }

  .model-card .m-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.35s var(--ease-out-expo);
  }

  .model-card.dark .m-icon { background: rgba(255,255,255,0.05); }
  .model-card.light .m-icon { background: #F5F5FA; }
  .model-card.selected .m-icon { background: rgba(0,122,255,0.12) !important; }

  .model-card .m-icon svg { width: 20px; height: 20px; transition: all 0.35s; }
  .model-card.dark .m-icon svg { fill: #636366; }
  .model-card.light .m-icon svg { fill: #AEAEB2; }
  .model-card.selected .m-icon svg { fill: var(--blue) !important; }

  .m-info { flex: 1; }

  .m-info .m-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .model-card.dark .m-name { color: white; }
  .model-card.light .m-name { color: #1C1C1E; }

  .m-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
  }
  .model-card.dark .m-badge { color: #636366; background: rgba(255,255,255,0.05); }
  .model-card.light .m-badge { color: #8E8E93; background: #F0F0F5; }

  .m-info .m-meta { font-size: 12px; font-weight: 500; }
  .model-card.dark .m-meta { color: #636366; }
  .model-card.light .m-meta { color: #AEAEB2; }

  /* Radio */
  .radio-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.35s var(--ease-out-expo);
  }

  .model-card.dark .radio-circle { border-color: rgba(255,255,255,0.1); }
  .model-card.light .radio-circle { border-color: #D1D1D6; }
  .model-card.selected .radio-circle { border-color: var(--blue) !important; }

  .radio-fill {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--blue);
    transform: scale(0);
    transition: transform 0.35s var(--spring);
  }

  .model-card.selected .radio-fill { transform: scale(1); }

  /* ════════════════════════════════════════════════ */
  /*       SCREEN 4: READY TO GO                     */
  /* ════════════════════════════════════════════════ */

  .ready-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 28px;
    position: relative;
    z-index: 1;
  }

  /* Celebration particles canvas */
  .celebration-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* ── Success Icon ── */
  .success-icon {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .success-icon .ring-outer {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2px solid;
    border-color: rgba(52,199,89,0.15);
    animation: ringExpand 2s ease-out infinite;
  }

  .success-icon .ring-outer:nth-child(2) {
    animation-delay: 0.7s;
  }

  @keyframes ringExpand {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  .success-icon .glow {
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52,199,89,0.2) 0%, rgba(0,122,255,0.1) 50%, transparent 70%);
    animation: breathe 3s ease-in-out infinite;
  }

  .success-icon .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2ecc71 0%, #27ae60 40%, #1abc9c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(52,199,89,0.3);
    animation: successPop 0.6s var(--spring) both;
  }

  @keyframes successPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }

  .success-icon .circle svg {
    width: 44px;
    height: 44px;
    fill: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    animation: checkDraw 0.4s 0.3s var(--ease-out-expo) both;
  }

  @keyframes checkDraw {
    from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
  }

  /* ── Ready Text ── */
  .ready-text {
    text-align: center;
    z-index: 1;
  }

  .ready-text h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
  }
  .ready-text h1.dark { color: white; }
  .ready-text h1.light { color: #1C1C1E; }

  .ready-text p {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
  }
  .ready-text p.dark { color: rgba(255,255,255,0.5); }
  .ready-text p.light { color: #8E8E93; }

  /* ── Vehicle Badge ── */
  .vehicle-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 14px;
    border-radius: 16px;
    z-index: 1;
    animation: badgeLock 0.6s 0.4s var(--spring) both;
  }

  @keyframes badgeLock {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .vehicle-badge.dark {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
  }

  .vehicle-badge.light {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }

  .vehicle-badge .vb-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0,122,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vehicle-badge .vb-icon svg { width: 18px; height: 18px; fill: var(--blue); }

  .vehicle-badge .vb-text {
    font-size: 15px;
    font-weight: 700;
  }
  .vehicle-badge.dark .vb-text { color: white; }
  .vehicle-badge.light .vb-text { color: #1C1C1E; }

  .vehicle-badge .vb-sub {
    font-size: 12px;
    font-weight: 500;
  }
  .vehicle-badge.dark .vb-sub { color: #636366; }
  .vehicle-badge.light .vb-sub { color: #AEAEB2; }

  /* ── Ready CTA ── */
  .ready-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
  }

  .btn-start {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, var(--blue) 0%, #6366F1 55%, var(--purple) 100%);
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 16px rgba(0,122,255,0.25);
    position: relative;
    overflow: hidden;
    font-family: inherit;
    letter-spacing: 0.01em;
    animation: ctaPulse 3s ease-in-out infinite alternate;
  }

  @keyframes ctaPulse {
    from { box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 16px rgba(0,122,255,0.25); }
    to { box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 6px 24px rgba(0,122,255,0.35); }
  }

  .btn-start::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  .btn-start span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-start svg { width: 18px; height: 18px; fill: white; }

  .auth-nudge {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .auth-nudge.dark { color: #48484A; }
  .auth-nudge.light { color: #AEAEB2; }
  .auth-nudge a {
    text-decoration: none;
    font-weight: 600;
  }
  .auth-nudge.dark a { color: #8E8E93; }
  .auth-nudge.light a { color: var(--blue); }
  .auth-nudge svg { flex-shrink: 0; }

  /* ── Stagger Animations for device wraps ── */
  .device-wrap {
    animation: deviceUp 0.7s var(--ease-out-expo) both;
  }

  .onboarding-preview .device-wrap:nth-child(1) { animation-delay: 0.1s; }
  .onboarding-preview .device-wrap:nth-child(2) { animation-delay: 0.2s; }
  .onboarding-preview .device-wrap:nth-child(3) { animation-delay: 0.3s; }
  .onboarding-preview .device-wrap:nth-child(4) { animation-delay: 0.4s; }

  @keyframes deviceUp {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Staggered model card entrance */
  .model-card:nth-child(1) { animation: cardEnter 0.5s 0.1s var(--ease-out-expo) both; }
  .model-card:nth-child(2) { animation: cardEnter 0.5s 0.2s var(--ease-out-expo) both; }
  .model-card:nth-child(3) { animation: cardEnter 0.5s 0.3s var(--ease-out-expo) both; }

  @keyframes cardEnter {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Staggered brand pill entrance */
  .brand-pill:nth-child(1) { animation: pillEnter 0.4s 0.1s var(--ease-out-back) both; }
  .brand-pill:nth-child(2) { animation: pillEnter 0.4s 0.2s var(--ease-out-back) both; }
  .brand-pill:nth-child(3) { animation: pillEnter 0.4s 0.3s var(--ease-out-back) both; }

  @keyframes pillEnter {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ── Confetti Piece ── */
  .confetti {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    animation: confettiFall linear forwards;
    z-index: 0;
  }

  @keyframes confettiFall {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateY(500px) rotate(720deg) scale(0);
      opacity: 0;
    }
  }

  /* ── Sparkle ── */
  .sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 3;
  }

  .sparkle::before, .sparkle::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 1px;
  }

  .sparkle::before {
    width: 2px;
    height: 10px;
    left: 4px;
    top: 0;
  }

  .sparkle::after {
    width: 10px;
    height: 2px;
    left: 0;
    top: 4px;
  }