/* ==========================================================================
   Taller360 — landing page styles
   Plain CSS, no build step. Sections follow the order of index.html.
   Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px
   ========================================================================== */


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy: #0B1220;
  --blue: #2563EB;
  --blue-light: #3B82F6;
  --blue-soft: #EFF6FF;
  --bg: #F8FAFC;
  --border: #E2E8F0;
  --dark: #0F172A;
  --muted: #64748B;

  /* Neutrals */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --gray-200: #e5e7eb;

  /* Blues */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  /* Status colours */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --purple-50: #faf5ff;
  --purple-200: #e9d5ff;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-plate: "JetBrains Mono", monospace;

  /* Radii */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-soft-lg: 0 20px 40px -15px rgba(15, 23, 42, 0.1);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms var(--ease), background-color 150ms var(--ease),
    border-color 150ms var(--ease), fill 150ms var(--ease), stroke 150ms var(--ease);
}


/* --------------------------------------------------------------------------
   Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--gray-200);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: inherit;
  background-color: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

ul, ol {
  list-style: none;
}

img, svg, video {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input {
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  -webkit-appearance: button;
}

input::placeholder {
  opacity: 1;
  color: #9ca3af;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

summary {
  display: list-item;
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--blue);
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}


/* --------------------------------------------------------------------------
   Icons (inline SVG sprite, see top of index.html)
   -------------------------------------------------------------------------- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-2xs { width: 0.625rem; height: 0.625rem; }
.icon-xs  { width: 0.75rem;  height: 0.75rem; }
.icon-sm  { width: 0.875rem; height: 0.875rem; }
.icon-lg  { width: 1.25rem;  height: 1.25rem; }
.icon-xl  { width: 1.5rem;   height: 1.5rem; }

.icon--bold   { stroke-width: 2.2; }
.icon--filled { fill: currentColor; }


/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes float-badge-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes float-badge-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

/* Live "ping" status dot */
.ping-dot {
  --dot-size: 0.5rem;
  position: relative;
  display: flex;
  width: var(--dot-size);
  height: var(--dot-size);
}
.ping-dot--lg { --dot-size: 0.625rem; }
.ping-dot--sm { --dot-size: 0.375rem; }

.ping-dot__wave {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--emerald-400);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ping-dot__core {
  position: relative;
  display: inline-flex;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-full);
  background-color: var(--emerald-500);
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--dark);
}

.page__main {
  flex: 1;
}

.container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.container--narrow { max-width: 56rem; }
.container--cta { max-width: 64rem; }

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

.section {
  padding-block: 5rem;
}
.section--bg { background-color: var(--bg); }
.section--white { background-color: #fff; }
.section--border-top { border-top: 1px solid var(--border); }
.section--border-bottom { border-bottom: 1px solid var(--border); }

/* Shared section heading */
.section-head {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center;
}
.section-head--mb12 { margin-bottom: 3rem; }
.section-head--faq { max-width: 42rem; margin-bottom: 3.5rem; }

.eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
}

.section-title {
  margin-bottom: 1rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--dark);
}

.section-lead {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--slate-600);
}

@media (min-width: 640px) {
  .section-title { font-size: 2.25rem; line-height: 2.5rem; }
  .section-lead { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .section-title--xl { font-size: 3rem; line-height: 1; }
}

/* Small blue pill used as an eyebrow */
.pill-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-full);
  background-color: var(--blue-50);
  color: var(--blue);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
.pill-label--tight { gap: 0.375rem; }

/* Photo header used by overview, bento and workflow cards */
.media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--slate-100);
}
.media--h40 { height: 10rem; }
.media--h44 { height: 11rem; }
.media--h48 { height: 12rem; }

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

.media__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(2 6 23 / 0.7), rgb(15 23 42 / 0.2), transparent);
}

.media__tag {
  position: absolute;
  bottom: 0.75rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.95);
  color: var(--slate-800);
  font-size: 11px;
  font-weight: 600;
}

.media__tag--sm {
  bottom: 0.625rem;
  left: 0.75rem;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: 10px;
}


/* --------------------------------------------------------------------------
   Header / navbar
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: all 300ms var(--ease);
}

.nav-desktop {
  display: none;
}

.nav-desktop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.brand__logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  transition: transform 150ms var(--ease);
}

.nav-desktop .brand:hover .brand__logo {
  transform: scale(1.05);
}

.brand--compact .brand__logo {
  width: 2rem;
  height: 2rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--dark);
}

.brand__tagline {
  margin-top: -0.25rem;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--slate-600);
  transition: var(--transition-colors);
}
.nav-link:hover {
  color: var(--blue);
}

.nav-link--badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nav-link__badge {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 200ms var(--ease);
}
.nav-cta:hover {
  background-color: var(--blue-700);
  box-shadow: var(--shadow);
}

/* Mobile floating pill */
.nav-mobile {
  padding: 0.75rem 1rem 0.5rem;
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: var(--radius-2xl);
  background-color: rgb(255 255 255 / 0.85);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.nav-toggle {
  padding: 0.25rem;
  color: var(--blue);
  transition: var(--transition-colors);
}
.nav-toggle:hover {
  color: var(--blue-700);
}
.nav-toggle:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .site-header {
    padding-block: 1rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(226 232 240 / 0.6);
  }
  .site-header.is-scrolled {
    padding-block: 0.75rem;
    border-bottom-color: var(--slate-200);
  }
  .nav-desktop { display: block; }
  .nav-mobile { display: none; }
}


/* --------------------------------------------------------------------------
   Mobile menu overlay
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 0.75rem 1rem 1.5rem;
  background-color: rgb(255 255 255 / 0.7);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

@media (min-width: 768px) {
  .mobile-menu { display: none; }
}

.mobile-menu__glow {
  position: fixed;
  z-index: -10;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.mobile-menu__glow--bottom {
  bottom: 3rem;
  left: 50%;
  width: 20rem;
  height: 14rem;
  background-color: rgb(37 99 235 / 0.25);
  filter: blur(90px);
  animation: pulse-glow 4s ease-in-out infinite;
}

.mobile-menu__glow--right {
  top: 25%;
  right: 1.5rem;
  width: 16rem;
  height: 16rem;
  background-color: rgb(99 102 241 / 0.2);
  filter: blur(80px);
}

.mobile-menu__glow--left {
  top: 33.333333%;
  left: 1.5rem;
  width: 14rem;
  height: 14rem;
  background-color: rgb(56 189 248 / 0.2);
  filter: blur(75px);
}

.mobile-menu__stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: var(--radius-2xl);
  background-color: #FAFBFD;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: var(--radius-2xl);
  background-color: #FAFBFD;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  color: var(--slate-800);
  font-size: 15px;
  font-weight: 600;
  transition: all 150ms var(--ease);
}
.mobile-menu__link:hover {
  background-color: #fff;
  color: var(--blue);
}
.mobile-menu__link:active {
  transform: scale(0.98);
}

.mobile-menu__link .icon {
  color: rgb(37 99 235 / 0.7);
  transition: all 150ms var(--ease);
}
.mobile-menu__link:hover .icon {
  color: var(--blue);
  transform: translateX(0.125rem);
}

.mobile-menu__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-menu__badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.mobile-menu__cta-wrap {
  padding-top: 0.5rem;
}

.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-2xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.25), 0 4px 6px -4px rgb(59 130 246 / 0.25);
  transition: all 150ms var(--ease);
}
.mobile-menu__cta:hover {
  background-color: var(--blue-700);
}
.mobile-menu__cta:active {
  transform: scale(0.98);
}

.mobile-menu__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--slate-500);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 0 4rem;
  background-image: linear-gradient(to bottom, var(--bg), #fff, var(--bg));
}

.hero__copy {
  max-width: 48rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgb(191 219 254 / 0.8);
  border-radius: var(--radius-full);
  background-color: var(--blue-50);
  color: var(--blue);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.hero__eyebrow span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.hero__title {
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--dark);
  text-wrap: balance;
}

.hero__br {
  display: none;
}

.hero__title-accent {
  background-image: linear-gradient(to right, var(--navy), var(--blue), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 42rem;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--slate-600);
  text-wrap: balance;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2rem;
}

.hero__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(37 99 235 / 0.2), 0 4px 6px -4px rgb(37 99 235 / 0.2);
  transition: all 200ms var(--ease);
}
.hero__cta-primary:hover {
  background-color: var(--blue-700);
  box-shadow: 0 20px 25px -5px rgb(37 99 235 / 0.3), 0 8px 10px -6px rgb(37 99 235 / 0.3);
  transform: translateY(-0.125rem);
}

.hero__cta-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-xl);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  transition: all 200ms var(--ease);
}
.hero__cta-video:hover {
  background-color: var(--slate-50);
  border-color: var(--slate-400);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--slate-500);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.hero__trust-item .icon {
  flex-shrink: 0;
}

.hero__trust-sep {
  display: none;
  color: var(--slate-300);
}

/* Floating mockup + satellite badges */
.hero__visual {
  position: relative;
  max-width: 64rem;
  margin: 1.5rem auto 0;
}

.hero__badge {
  position: absolute;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background-color: rgb(255 255 255 / 0.95);
  box-shadow: var(--shadow-soft-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero__badge--goal {
  top: -1rem;
  right: -0.75rem;
  padding: 0.5rem 0.875rem;
  animation: float-badge-1 5s ease-in-out infinite;
}

.hero__badge--ai {
  bottom: -1.25rem;
  left: -0.75rem;
  padding: 0.625rem 0.875rem;
  animation: float-badge-2 7s ease-in-out infinite;
}

.hero__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-xl);
  background-color: var(--emerald-50);
  color: var(--emerald-600);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.hero__badge-label {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: var(--slate-400);
}

.hero__badge-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--slate-800);
}

.hero__badge-delta {
  font-size: 10px;
  font-weight: 600;
  color: var(--emerald-600);
}

.hero__badge-text {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--slate-800);
}

.hero__badge-strong {
  font-weight: 700;
  color: var(--blue);
}

.hero__float {
  animation: float-slow 6s ease-in-out infinite;
  transition: transform 150ms var(--ease);
}

@media (min-width: 640px) {
  .hero__eyebrow { font-size: 0.875rem; line-height: 1.25rem; }
  .hero__eyebrow span { font-size: 0.75rem; line-height: 1rem; }
  .hero__title { font-size: 3rem; line-height: 1; }
  .hero__br { display: inline; }
  .hero__lead { font-size: 1.125rem; line-height: 1.75rem; }
  .hero__ctas { flex-direction: row; }
  .hero__cta-primary,
  .hero__cta-video { width: auto; }
  .hero__trust { gap: 1.5rem; }
  .hero__trust-sep { display: inline; }
  .hero__badge { display: flex; }
}

@media (min-width: 1024px) {
  .hero { padding: 3.5rem 0 6rem; }
  .hero__copy { margin-bottom: 3.5rem; }
  .hero__title { font-size: 3.75rem; line-height: 1; }
  .hero__lead { font-size: 1.25rem; line-height: 1.75rem; }
  .hero__badge--goal { right: -1.5rem; }
  .hero__badge--ai { left: -1.5rem; }
}


/* --------------------------------------------------------------------------
   Hero dashboard mockup
   -------------------------------------------------------------------------- */
.mockup {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  text-align: left;
  box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.1);
  transition: all 300ms var(--ease);
}

/* Fake browser chrome */
.mockup__browser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--slate-800);
  background-color: var(--slate-900);
  color: var(--slate-400);
  font-size: 0.75rem;
  line-height: 1rem;
}

.mockup__browser-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mockup__dots {
  display: flex;
  gap: 0.375rem;
}

.mockup__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
}
.mockup__dot--red { background-color: rgb(244 63 94 / 0.8); }
.mockup__dot--amber { background-color: rgb(245 158 11 / 0.8); }
.mockup__dot--green { background-color: rgb(16 185 129 / 0.8); }

.mockup__url {
  display: none;
  margin-left: 0.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-md);
  background-color: rgb(30 41 59 / 0.8);
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 11px;
}

.mockup__browser-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mockup__live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--emerald-400);
  font-size: 11px;
  font-weight: 500;
}

.mockup__location {
  color: var(--slate-400);
  font-size: 11px;
}

/* App layout */
.mockup__layout {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  background-color: var(--slate-50);
}

.mockup__sidebar {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 13rem;
  padding: 0.75rem;
  border-right: 1px solid var(--slate-200);
  background-color: #fff;
}

.mockup__app-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--slate-800);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.mockup__app-name img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.mockup__menu {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.mockup__menu > * + * {
  margin-top: 0.125rem;
}

.mockup__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  color: var(--slate-600);
  transition: var(--transition-colors);
}
.mockup__menu-item:hover {
  background-color: var(--slate-100);
  color: var(--slate-900);
}
.mockup__menu-item.is-active {
  background-color: var(--blue);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.mockup__menu-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mockup__menu-label .icon {
  color: var(--slate-500);
}
.mockup__menu-item.is-active .mockup__menu-label .icon {
  color: #fff;
}

.mockup__menu-count {
  padding-inline: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--slate-100);
  color: var(--slate-600);
  font-size: 10px;
}
.mockup__menu-item.is-active .mockup__menu-count {
  background-color: rgb(255 255 255 / 0.2);
  color: #fff;
}

.mockup__menu-ai {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
}

.mockup__doctor {
  padding: 0.75rem;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-xl);
  background-color: rgb(239 246 255 / 0.8);
  text-align: left;
}

.mockup__doctor-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  color: var(--blue);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.mockup__doctor p {
  color: var(--slate-600);
  font-size: 11px;
  line-height: 1.25;
}

/* Main panel */
.mockup__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 1rem;
}

.mockup__topbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--slate-200);
}

.mockup__greeting {
  color: var(--slate-900);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.mockup__summary {
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.mockup__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mockup__search {
  position: relative;
}

.mockup__search .icon {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  transform: translateY(-50%);
  color: var(--slate-400);
}

.mockup__search input {
  width: 11rem;
  padding: 0.375rem 0.75rem 0.375rem 2rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-600);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
}
.mockup__search input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.mockup__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-600);
}

.mockup__bell-dot {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--blue);
}

.mockup__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
}

.mockup__kpi {
  padding: 0.875rem;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: var(--radius-xl);
  background-color: #fff;
  cursor: default;
  transition: all 200ms var(--ease);
}
.mockup__kpi:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-md);
}

.mockup__kpi-label {
  display: block;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mockup__kpi-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.mockup__kpi-value {
  color: var(--slate-900);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.mockup__kpi-chip {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
}
.mockup__kpi-chip--green { background-color: var(--emerald-50); color: var(--emerald-600); }
.mockup__kpi-chip--amber { background-color: var(--amber-50); color: var(--amber-600); }

.mockup__kpi-note {
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 500;
}

.mockup__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.mockup__panel {
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: #fff;
}

.mockup__panel--orders {
  overflow: hidden;
}

.mockup__panel--calls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mockup__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.mockup__panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mockup__panel-title--tight { gap: 0.375rem; }

.mockup__panel-title h4 {
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mockup__link {
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.mockup__link:hover {
  text-decoration: underline;
}

.mockup__orders {
  overflow-x: auto;
}
.mockup__orders > * + * {
  border-top: 1px solid var(--slate-100);
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 340px;
  margin-inline: -0.5rem;
  padding: 0.625rem 0.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  transition: var(--transition-colors);
}
.order-row:hover {
  background-color: var(--slate-50);
}

.order-row__info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.order-row__img {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  transition: transform 150ms var(--ease);
}
.order-row:hover .order-row__img {
  transform: scale(1.05);
}

.order-row__plate {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-800);
  font-size: 11px;
  transition: var(--transition-colors);
}
.order-row:hover .order-row__plate {
  border-color: var(--slate-400);
}

.order-row__desc {
  display: block;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: var(--transition-colors);
}
.order-row:hover .order-row__desc {
  color: var(--blue);
}

.order-row__meta {
  color: var(--slate-400);
  font-size: 11px;
}

.order-row__status {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
}

/* Work order status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}
.status__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
}
.status--blue { background-color: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700); }
.status--blue .status__dot { background-color: var(--blue); }
.status--purple { background-color: var(--purple-50); border-color: var(--purple-200); color: var(--purple-700); }
.status--purple .status__dot { background-color: var(--purple-600); }
.status--green { background-color: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-700); }
.status--green .status__dot { background-color: var(--emerald-500); }

.mockup__live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius-full);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 10px;
  font-weight: 700;
}

.mockup__calls {
  font-size: 0.75rem;
  line-height: 1rem;
}
.mockup__calls > * + * {
  margin-top: 0.625rem;
}

.mockup__call {
  padding: 0.625rem;
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg);
  background-color: var(--slate-50);
}

.mockup__call-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--slate-700);
  font-size: 11px;
  font-weight: 600;
}

.mockup__call-time {
  color: var(--slate-400);
}

.mockup__call p {
  margin-top: 0.25rem;
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.25;
}

.mockup__call-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  color: var(--blue);
  font-size: 10px;
  font-weight: 500;
}

.mockup__calls-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
  font-size: 11px;
}
.mockup__calls-foot > span:first-child {
  color: var(--slate-500);
}

.mockup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-400);
  font-size: 11px;
}

.mockup__sync {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mockup__sync-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--emerald-500);
}

@media (min-width: 640px) {
  .mockup__url { display: inline-block; }
  .mockup__main { padding: 1.5rem; }
  .mockup__topbar { flex-direction: row; align-items: center; }
  .mockup__greeting { font-size: 1.25rem; line-height: 1.75rem; }
  .mockup__search input { width: 14rem; }
}
@media (min-width: 768px) {
  .mockup__sidebar { display: flex; }
}
@media (min-width: 1024px) {
  .mockup__layout { flex-direction: row; }
  .mockup__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .mockup__split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mockup__panel--orders { grid-column: span 2 / span 2; }
}


/* --------------------------------------------------------------------------
   Trust / pillars
   -------------------------------------------------------------------------- */
.trust {
  padding-block: 3rem;
  border-block: 1px solid var(--border);
  background-color: #fff;
}

.trust__head {
  max-width: 42rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.trust__title {
  color: var(--dark);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.trust__video {
  max-width: 56rem;
  margin: 0 auto 2.5rem;
}

.trust__video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-2xl);
  background-color: #000;
  box-shadow: var(--shadow-soft-lg);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.pillar {
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  text-align: center;
  cursor: default;
  transition: all 300ms var(--ease);
}
.pillar:hover {
  border-color: var(--blue-300);
  background-color: rgb(239 246 255 / 0.4);
  box-shadow: var(--shadow-soft);
  transform: translateY(-0.25rem);
}

.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.625rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-700);
  transition: var(--transition-colors);
}
.pillar:hover .pillar__icon {
  border-color: var(--blue-200);
  color: var(--blue);
}

.pillar__title {
  margin-bottom: 0.125rem;
  color: var(--slate-800);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.pillar__desc {
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.375;
}

.commitments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

.commitments__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .trust__title { font-size: 1.5rem; line-height: 2rem; }
  .pillars { gap: 1rem; }
  .commitments { gap: 2.5rem; }
}
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Product overview cards
   -------------------------------------------------------------------------- */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.overview-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
  transition: all 300ms var(--ease);
}
.overview-card:hover {
  box-shadow: var(--shadow-soft-lg);
}

.overview-card:hover .media__img,
.bento-card:hover .media__img,
.step:hover .media__img {
  transform: scale(1.05);
}

.overview-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.overview-card__title {
  margin-bottom: 0.5rem;
  color: var(--slate-900);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.overview-card__text {
  margin-bottom: 1.5rem;
  color: var(--slate-600);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Mini UI mockups inside the cards */
.mini {
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  font-size: 0.75rem;
  line-height: 1rem;
}

.mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate-200);
}
.mini__head--tight { padding-bottom: 0.625rem; }

.mini__person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mini__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.mini__name {
  display: block;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.mini__sub {
  color: var(--slate-400);
  font-size: 10px;
}

.chip {
  padding: 0.125rem 0.5rem;
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}
.chip--icon { display: flex; align-items: center; gap: 0.25rem; }
.chip--blue { background-color: var(--blue-50); border-color: var(--blue-200); color: var(--blue); }
.chip--green { background-color: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-700); }
.chip--purple { background-color: var(--purple-50); border-color: var(--purple-200); color: var(--purple-700); }

.mini__rows {
  padding-block: 0.625rem;
  color: var(--slate-600);
  font-size: 11px;
}
.mini__rows > * + * {
  margin-top: 0.375rem;
}

.mini__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini__label {
  color: var(--slate-400);
}

.mini__strong {
  color: var(--slate-700);
  font-weight: 600;
}

.mini__accent {
  color: var(--blue);
  font-weight: 500;
}

.mini__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--slate-200);
}

.mini__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 500;
}

.mini__btn--grow {
  flex: 1;
  padding-inline: 0.5rem;
  border-color: var(--slate-200);
  background-color: #fff;
  color: var(--slate-700);
}
.mini__btn--grow:hover {
  background-color: var(--slate-100);
}

.mini__btn--green {
  border-color: var(--emerald-200);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
}
.mini__btn--green:hover {
  background-color: var(--emerald-100);
}

.mini__vehicle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini__plate {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
}

.mini__vehicle-name {
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.mini__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding-block: 0.625rem;
  color: var(--slate-600);
  font-size: 11px;
}

.mini__spec {
  padding: 0.5rem;
  border: 1px solid rgb(226 232 240 / 0.6);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

.mini__spec-label {
  display: block;
  color: var(--slate-400);
  font-size: 10px;
}

.mini__spec-value {
  color: var(--slate-800);
  font-weight: 500;
}
.mini__spec-value--bold { font-weight: 700; }

.mini__semaforo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  font-size: 11px;
}

.mini__semaforo-label {
  color: var(--slate-500);
  font-weight: 500;
}

.mini__semaforo-chips {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.light-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: 10px;
}
.light-chip__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
}
.light-chip--green { background-color: var(--emerald-50); color: var(--emerald-700); }
.light-chip--green .light-chip__dot { background-color: var(--emerald-500); }
.light-chip--amber { background-color: var(--amber-50); color: var(--amber-700); }
.light-chip--amber .light-chip__dot { background-color: var(--amber-500); }

.mini__order {
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.mini__order-sub {
  display: block;
  color: var(--slate-400);
  font-size: 10px;
}

.mini__lines {
  padding-block: 0.625rem;
  font-size: 11px;
}
.mini__lines > * + * {
  margin-top: 0.25rem;
}

.mini__line {
  display: flex;
  justify-content: space-between;
  color: var(--slate-600);
}

.mini__line--total {
  padding-top: 0.25rem;
  border-top: 1px dashed var(--slate-200);
  color: var(--slate-900);
  font-weight: 700;
}

.mini__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-400);
  font-size: 11px;
}

.mini__foot-link {
  color: var(--blue);
  font-weight: 500;
  cursor: pointer;
}
.mini__foot-link:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .overview-card__body { padding: 1.75rem; }
}
@media (min-width: 1024px) {
  .overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Bento features
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Large dark card: AI phone receptionist */
.bento-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-2xl);
  background-image: linear-gradient(to bottom right, var(--slate-900), var(--navy));
  color: #fff;
  box-shadow: var(--shadow-soft-lg);
  transition: all 300ms var(--ease);
}
.bento-hero:hover {
  box-shadow: var(--shadow-2xl);
  transform: translateY(-0.25rem);
}

.bento-hero__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 20rem;
  height: 20rem;
  border-radius: var(--radius-full);
  background-color: rgb(37 99 235 / 0.2);
  filter: blur(64px);
  pointer-events: none;
  transition: all 500ms var(--ease);
}
.bento-hero:hover .bento-hero__glow {
  background-color: rgb(37 99 235 / 0.3);
}

.bento-hero__grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem;
}

.bento-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bento-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(59 130 246 / 0.4);
  border-radius: var(--radius-xl);
  background-color: rgb(37 99 235 / 0.3);
  color: var(--blue-400);
  transition: transform 300ms var(--ease);
}
.bento-hero:hover .bento-hero__icon {
  transform: scale(1.05);
}

.bento-hero__live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(16 185 129 / 0.3);
  border-radius: var(--radius-full);
  background-color: rgb(16 185 129 / 0.2);
  color: var(--emerald-300);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.bento-hero__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.bento-hero__text {
  margin-bottom: 1.5rem;
  color: var(--slate-300);
  font-size: 0.875rem;
  line-height: 1.625;
}

.call-snapshot {
  padding: 1rem;
  border: 1px solid rgb(51 65 85 / 0.8);
  border-radius: var(--radius-xl);
  background-color: rgb(30 41 59 / 0.9);
  font-size: 0.75rem;
  line-height: 1rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.call-snapshot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--slate-700);
}

.call-snapshot__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.call-snapshot__title > span:last-child {
  color: #fff;
  font-weight: 600;
}

.call-snapshot__ping {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--emerald-400);
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.call-snapshot__duration {
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 11px;
}

.call-snapshot__quote {
  margin-bottom: 0.5rem;
  color: var(--slate-300);
  font-size: 0.75rem;
  line-height: 1rem;
  font-style: italic;
}

.call-snapshot__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 11px;
}

.call-snapshot__tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid;
  border-radius: var(--radius);
}
.call-snapshot__tag--blue {
  border-color: rgb(96 165 250 / 0.3);
  background-color: rgb(59 130 246 / 0.2);
  color: var(--blue-300);
}
.call-snapshot__tag--green {
  border-color: rgb(52 211 153 / 0.3);
  background-color: rgb(16 185 129 / 0.2);
  color: var(--emerald-300);
}

.bento-hero__photo {
  position: relative;
  height: 16rem;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgb(51 65 85 / 0.8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.bento-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.bento-hero:hover .bento-hero__photo img {
  transform: scale(1.05);
}

.bento-hero__photo-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(2 6 23 / 0.8), rgb(2 6 23 / 0.3), transparent);
}

.bento-hero__photo-caption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.bento-hero__photo-caption > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius);
  background-color: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Standard bento cards */
.bento-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background-color: var(--slate-50);
  box-shadow: var(--shadow-soft);
  transition: all 300ms var(--ease);
}
.bento-card:hover {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-soft-lg);
  transform: translateY(-0.25rem);
}

.bento-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.bento-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bento-card__title {
  color: var(--slate-900);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.bento-card__title--mb { margin-bottom: 0.5rem; }

.bento-card__badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.bento-card__text {
  margin-bottom: 1rem;
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1.625;
}

.bento-card__box {
  padding: 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
}
.bento-card__box--stack-6 > * + * { margin-top: 0.375rem; }
.bento-card__box--stack-4 > * + * { margin-top: 0.25rem; }
.bento-card__box--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bento-card__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.bento-card__strong { color: var(--slate-800); font-weight: 700; }
.bento-card__success { color: var(--emerald-600); font-weight: 700; }

.bento-card__muted {
  color: var(--slate-500);
  font-size: 11px;
}
.bento-card__muted--block { display: block; }

.bento-card__plate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.bento-card__plate {
  padding: 0.125rem 0.5rem;
  border-width: 1px;
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-900);
  font-size: 0.75rem;
  line-height: 1rem;
}

.bento-card__ok {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 10px;
  font-weight: 700;
}

.bento-card__price {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.bento-card__price--muted { color: var(--slate-500); }

.bento-card__semibold { color: var(--slate-800); font-weight: 600; }
.bento-card__cost { color: var(--blue); font-weight: 700; }
.bento-card__pvp { color: var(--slate-900); font-weight: 700; }

.bento-card__lights {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-card__light {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
}
.bento-card__light--green { background-color: var(--emerald-500); }
.bento-card__light--amber { background-color: var(--amber-500); }
.bento-card__light--red { background-color: var(--rose-500); }

.bento-card__lights-label {
  margin-left: 0.25rem;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 500;
}

.bento-card__pdf {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--blue-50);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.bento-card__share {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 500;
}

.bento-card__approve {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--emerald-50);
  color: var(--emerald-600);
  font-size: 11px;
  font-weight: 600;
}

.bento-card__note {
  padding: 0.625rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: #fff;
  color: var(--slate-500);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
}
.bento-card__note--blue {
  color: var(--blue);
  font-weight: 600;
}

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-hero { grid-column: span 2 / span 2; }
  .bento-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento-hero__content { grid-column: span 7 / span 7; }
  .bento-hero__photo { grid-column: span 5 / span 5; height: 100%; }
}


/* --------------------------------------------------------------------------
   Product showcase (tabs)
   -------------------------------------------------------------------------- */
.showcase {
  position: relative;
  overflow: hidden;
  padding-block: 6rem;
  border-block: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--dark);
}

.showcase__glow {
  position: absolute;
  pointer-events: none;
}

.showcase__glow--center {
  top: 50%;
  left: 50%;
  width: 900px;
  height: 500px;
  background-color: rgb(37 99 235 / 0.05);
  filter: blur(120px);
  transform: translate(-50%, -50%);
}

.showcase__glow--corner {
  top: 0;
  right: 25%;
  width: 24rem;
  height: 24rem;
  border-radius: var(--radius-full);
  background-color: rgb(37 99 235 / 0.05);
  filter: blur(100px);
}

.showcase__inner {
  position: relative;
  z-index: 10;
}

/* "safe center" keeps the first tab reachable when the bar overflows on phones */
.tabs-scroller {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  margin-bottom: 2.5rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
}

.tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.375rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  box-shadow: var(--shadow-soft);
}

.tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-xl);
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 150ms var(--ease);
}
.tab:hover {
  background-color: var(--slate-50);
  color: var(--slate-900);
}
.tab.is-active {
  background-color: var(--blue);
  color: #fff;
}

.showcase__panel {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  box-shadow: var(--shadow-soft-lg);
}

.tab-panel > * + * {
  margin-top: 1.5rem;
}

/* Panel header row shared by all tabs */
.panel-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--slate-100);
}

.panel-head__lead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-head__thumb {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
}

.panel-head__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-900);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.panel-head__title--lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.panel-head__tag {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius);
  background-color: var(--blue-50);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.panel-head__sub {
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.panel-head__goal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.panel-head__goal-value {
  color: var(--emerald-600);
  font-weight: 700;
}

.panel-head__confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius-full);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.panel-head__agent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.panel-head__agent > span:last-child {
  color: var(--emerald-700);
  font-weight: 600;
}

.panel-head__plate {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
}

.panel-head__btn {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: var(--transition-colors);
}
.panel-head__btn:hover {
  background-color: var(--blue-700);
}

/* Tab 1 — KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.875rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  cursor: default;
  transition: all 200ms var(--ease);
}
.kpi:hover {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-soft);
  transform: translateY(-0.125rem);
}

.kpi__label {
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi__value-wrap {
  margin-block: 0.5rem;
}

.kpi__value {
  color: var(--slate-900);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.kpi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.kpi__sub {
  overflow: hidden;
  color: var(--slate-400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi__change {
  flex-shrink: 0;
  margin-left: 0.25rem;
  color: var(--slate-500);
  font-weight: 600;
}
.kpi__change.is-positive {
  color: var(--emerald-600);
}

/* Tab 1 — revenue chart + box status */
.dash-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-top: 0.5rem;
}

.chart {
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chart__title {
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chart__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
}
.chart__legend > span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.chart__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-sm);
}
.chart__swatch--blue { background-color: var(--blue); }
.chart__swatch--green { background-color: var(--emerald-500); }

.chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.375rem;
  height: 11rem;
  padding: 1rem 0.5rem 0;
  border-bottom: 1px solid var(--slate-200);
}

.chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  height: 100%;
}

.chart__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  width: 100%;
  max-width: 28px;
  height: 100%;
}

.chart__bar {
  width: 100%;
  transition: all 150ms var(--ease);
}
.chart__bar--blue {
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--blue);
}
.chart__bar--green {
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: var(--emerald-500);
}
.chart__col:hover .chart__bar {
  filter: brightness(1.1);
}

.chart__day {
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 10px;
}

.boxes {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.boxes__title {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boxes__list {
  font-size: 0.75rem;
  line-height: 1rem;
}
.boxes__list > * + * {
  margin-top: 0.625rem;
}

.boxes__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

.boxes__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.boxes__label > span:last-child {
  color: var(--slate-700);
  font-weight: 500;
}

.boxes__thumb {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: cover;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}

.boxes__free-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius-md);
  background-color: var(--emerald-50);
  color: var(--emerald-600);
  font-size: 10px;
  font-weight: 700;
}

.boxes__plate {
  padding: 0.125rem 0.5rem;
  border: 1px solid;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}
.boxes__plate--blue { background-color: var(--blue-50); border-color: var(--blue-200); color: var(--blue); }
.boxes__plate--purple { background-color: var(--purple-50); border-color: var(--purple-200); color: var(--purple-700); }

.boxes__free {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.boxes__tip {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-xl);
  background-color: var(--blue-50);
  color: var(--blue-900);
  font-size: 11px;
  line-height: 1.625;
}

/* Tab 2 — El Doctor */
.doctor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.doctor__main > * + * {
  margin-top: 1rem;
}

.doctor__symptom {
  padding: 1rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.doctor__kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doctor__symptom-text {
  color: var(--slate-700);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
}

.doctor__diagnosis {
  padding: 1rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-xl);
  background-color: rgb(239 246 255 / 0.7);
}

.doctor__diagnosis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.doctor__diagnosis-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doctor__dtc {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 10px;
}

.doctor__cause {
  margin-bottom: 0.75rem;
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 500;
}

.doctor__guide {
  padding-left: 1rem;
  border-left: 2px solid var(--blue);
  color: var(--slate-600);
}
.doctor__guide > * + * {
  margin-top: 0.375rem;
}

.doctor__guide-title {
  color: var(--slate-900);
  font-size: 11px;
  font-weight: 700;
}

.doctor__step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.doctor__step-num {
  flex-shrink: 0;
  color: var(--blue);
  font-weight: 700;
}

.doctor__vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.doctor__vote-question {
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

.doctor__vote-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vote-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: all 150ms var(--ease);
}
.vote-btn:hover {
  background-color: var(--slate-100);
}
.vote-btn[data-vote="yes"][aria-pressed="true"] {
  border-width: 0;
  background-color: var(--emerald-600);
  color: #fff;
}
.vote-btn[data-vote="no"][aria-pressed="true"] {
  border-width: 0;
  background-color: var(--rose-600);
  color: #fff;
}

.parts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.parts__title {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.parts__list > * + * {
  margin-top: 0.75rem;
}

.part {
  padding: 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

.part__name {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--slate-900);
  font-weight: 700;
}

.part__ref {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 10px;
}

.part__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.part__price--mb2 { margin-bottom: 0.5rem; }
.part__price--mb3 { margin-bottom: 0.75rem; }

.part__cost {
  color: var(--emerald-600);
  font-family: var(--font-mono);
  font-weight: 700;
}

.part__pvp {
  color: var(--slate-900);
  font-family: var(--font-mono);
  font-weight: 700;
}

.part__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding-block: 0.375rem;
  border-radius: var(--radius);
  background-color: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  transition: var(--transition-colors);
}
.part__btn:hover {
  background-color: var(--blue-700);
}

.parts__foot {
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-500);
  font-size: 10px;
}

/* Tab 3 — AI calls */
.calls {
  font-size: 0.75rem;
  line-height: 1rem;
}
.calls > * + * {
  border-top: 1px solid var(--slate-100);
}

.call {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.875rem;
}

.call__info > * + * {
  margin-top: 0.25rem;
}

.call__who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.call__name {
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.call__phone {
  color: var(--slate-500);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
}

.call__plate {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-700);
  font-size: 10px;
}

.call__duration {
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 11px;
}

.call__reason {
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
}

.call__summary {
  color: var(--slate-500);
  font-size: 11px;
  font-style: italic;
}

.call__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}

.call__listen {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  transition: var(--transition-colors);
}
.call__listen:hover {
  background-color: var(--slate-50);
}

.call__outcome {
  padding: 0.25rem 0.625rem;
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}
.call__outcome--booked { background-color: var(--emerald-50); border-color: var(--emerald-200); color: var(--emerald-700); }
.call__outcome--escalated { background-color: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); }

.flow {
  padding-top: 1rem;
  border-top: 1px solid var(--slate-100);
}

.flow__title {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flow__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
}

.flow__step {
  padding: 0.625rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background-color: var(--slate-50);
  color: var(--slate-500);
}
.flow__step--blue {
  border-color: var(--blue-200);
  background-color: var(--blue-50);
  color: var(--blue);
  font-weight: 700;
}
.flow__step--green {
  border-color: var(--emerald-200);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-weight: 700;
}

/* Tab 4 — 8-point inspection */
.inspection-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.inspection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.875rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  transition: var(--transition-colors);
}
.inspection:hover {
  border-color: var(--slate-300);
}

.inspection__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.inspection__title {
  color: var(--slate-900);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.inspection__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
}

.inspection__desc {
  color: var(--slate-600);
  font-size: 11px;
  line-height: 1.375;
}

.inspection__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  font-size: 10px;
}

.inspection__label {
  color: var(--slate-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inspection__state {
  font-weight: 700;
}

.inspection--green .inspection__dot { background-color: var(--emerald-500); }
.inspection--green .inspection__state { color: var(--emerald-700); }
.inspection--amber .inspection__dot { background-color: var(--amber-500); }
.inspection--amber .inspection__state { color: var(--amber-700); }
.inspection--red .inspection__dot {
  background-color: var(--rose-500);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.inspection--red .inspection__state { color: var(--rose-700); }

@media (min-width: 640px) {
  .tab { font-size: 0.875rem; line-height: 1.25rem; }
  .showcase__panel { padding: 1.75rem; }
  .panel-head { flex-direction: row; align-items: center; }
  .panel-head__btn { align-self: auto; }
  .flow__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .chart__bars { gap: 0.75rem; }
}
@media (min-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .call { flex-direction: row; align-items: center; }
  .inspection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dash-split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart { grid-column: span 2 / span 2; }
  .doctor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doctor__main { grid-column: span 2 / span 2; }
  .inspection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Workflow steps
   -------------------------------------------------------------------------- */
.workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background-color: var(--slate-50);
  box-shadow: var(--shadow-soft);
  transition: all 300ms var(--ease);
}
.step:hover {
  box-shadow: var(--shadow-soft-lg);
  transform: translateY(-0.25rem);
}

.step__number {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-md);
  background-color: rgb(15 23 42 / 0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.step__digits {
  color: var(--blue-light);
  font-weight: 800;
}

.step__word {
  color: var(--slate-300);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.step__icon {
  position: absolute;
  right: 0.75rem;
  bottom: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background-color: rgb(255 255 255 / 0.9);
  color: var(--blue);
}

.step__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.step__title {
  margin-bottom: 0.5rem;
  color: var(--slate-900);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.step__text {
  margin-bottom: 1rem;
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1.625;
}

.step__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(226 232 240 / 0.8);
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
}

.step__meta .icon {
  transition: transform 150ms var(--ease);
}
.step:hover .step__meta .icon {
  transform: translateX(0.25rem);
}

@media (min-width: 768px) {
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Vehicle history (plate search)
   -------------------------------------------------------------------------- */
.plate-search {
  max-width: 36rem;
  margin: 0 auto 2.5rem;
}

.plate-search__form {
  display: flex;
  gap: 0.5rem;
}

.plate-search__field {
  position: relative;
  flex: 1;
}

.plate-search__field .icon {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  color: var(--slate-400);
}

.plate-search__field input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-xl);
  background-color: #fff;
  color: var(--slate-800);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.plate-search__field input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue), var(--shadow-sm);
}

.plate-search__submit {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-colors);
}
.plate-search__submit:hover {
  background-color: var(--blue-700);
}

.plate-search__suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.plate-search__chip {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 150ms var(--ease);
}
.plate-search__chip:hover {
  border-color: var(--blue);
}
.plate-search__chip.is-active {
  border-width: 0;
  background-color: var(--blue);
  color: #fff;
}

.vehicle {
  max-width: 64rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  box-shadow: var(--shadow-soft-lg);
}

.vehicle__banner {
  position: relative;
  width: 100%;
  height: 13rem;
  overflow: hidden;
  background-color: var(--slate-900);
}

.vehicle__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 700ms var(--ease);
}
.vehicle__banner:hover .vehicle__photo {
  transform: scale(1.05);
}

.vehicle__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--slate-950), rgb(2 6 23 / 0.4), transparent);
}

.vehicle__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vehicle__plate {
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-lg);
  background-color: rgb(15 23 42 / 0.9);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-md);
}

.vehicle__itv {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-lg);
  background-color: rgb(16 185 129 / 0.9);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.vehicle__headline {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  max-width: 36rem;
  color: #fff;
}

.vehicle__kicker {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--blue-300);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vehicle__name {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
}

.vehicle__vin {
  margin-top: 0.25rem;
  color: var(--slate-300);
  font-size: 0.75rem;
  line-height: 1rem;
}

.vehicle__vin-code {
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
}

.vehicle__owner-wrap {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.vehicle__owner {
  padding: 0.375rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-lg);
  background-color: rgb(0 0 0 / 0.6);
  color: var(--slate-200);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vehicle__owner strong {
  color: #fff;
}

.vehicle__body {
  padding: 1.5rem;
}

.vehicle__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-100);
  font-size: 0.75rem;
  line-height: 1rem;
}

.vehicle__spec {
  padding: 0.625rem;
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg);
  background-color: var(--slate-50);
}

.vehicle__spec-label {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--slate-400);
  font-size: 10px;
}

.vehicle__spec-value {
  color: var(--slate-800);
  font-weight: 600;
}

.vehicle__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-top: 1.5rem;
}

.vehicle__history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.vehicle__history-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vehicle__history-add {
  color: var(--blue);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.vehicle__history-add:hover {
  text-decoration: underline;
}

/* Repair timeline (items rendered by js/main.js) */
.timeline {
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.875rem;
  width: 0.125rem;
  background-color: var(--slate-200);
}
.timeline > * + * {
  margin-top: 1rem;
}

.timeline__item {
  position: relative;
  padding-left: 2rem;
}

.timeline__dot {
  position: absolute;
  top: 0.375rem;
  left: 0.5rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  background-color: var(--blue);
}

.timeline__card {
  padding: 0.875rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  transition: var(--transition-colors);
}
.timeline__item:hover .timeline__card {
  border-color: var(--blue-200);
}

.timeline__top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.timeline__what {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline__desc {
  color: var(--slate-900);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.timeline__type {
  padding: 0.125rem 0.5rem;
  border-width: 1px;
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 600;
}

.timeline__cost {
  color: var(--slate-900);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.timeline__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--slate-400);
  font-size: 11px;
}

.timeline__date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.timeline__km {
  font-family: var(--font-mono);
}

/* 8-point check (rows rendered by js/main.js) */
.checkup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
}

.checkup__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkup__updated {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--emerald-100);
  color: var(--emerald-700);
  font-size: 10px;
  font-weight: 700;
}

.checkup__list {
  font-size: 0.75rem;
  line-height: 1rem;
}
.checkup__list > * + * {
  margin-top: 0.5rem;
}

.checkup__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.25rem;
  border-bottom: 1px solid rgb(226 232 240 / 0.6);
}
.checkup__row:last-child {
  border-bottom-width: 0;
}

.checkup__name {
  display: block;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.checkup__detail {
  color: var(--slate-500);
  font-size: 11px;
  line-height: 1.25;
}

.checkup__light {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.25rem;
  border-radius: var(--radius-full);
}
.checkup__light--verde { background-color: var(--emerald-500); }
.checkup__light--ambar { background-color: var(--amber-500); }
.checkup__light--rojo { background-color: var(--rose-500); }

.checkup__foot {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200);
  text-align: center;
}

.checkup__print {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding-block: 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: var(--transition-colors);
}
.checkup__print:hover {
  background-color: var(--slate-100);
}

@media (min-width: 640px) {
  .vehicle__banner { height: 16rem; }
  .vehicle__badges { top: 1.5rem; left: 1.5rem; }
  .vehicle__plate { font-size: 1rem; line-height: 1.5rem; }
  .vehicle__headline { bottom: 1.5rem; left: 1.5rem; }
  .vehicle__name { font-size: 1.875rem; line-height: 2.25rem; }
  .vehicle__vin { font-size: 0.875rem; line-height: 1.25rem; }
  .vehicle__owner-wrap { display: flex; }
  .vehicle__body { padding: 2rem; }
  .vehicle__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline__top { flex-direction: row; align-items: center; }
  .timeline__cost { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 1024px) {
  .vehicle__split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vehicle__history { grid-column: span 2 / span 2; }
}


/* --------------------------------------------------------------------------
   Budget / quote document
   -------------------------------------------------------------------------- */
.quote {
  max-width: 56rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: var(--slate-50);
  box-shadow: var(--shadow-soft-lg);
}

.quote__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-200);
}

.quote__ids {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.quote__number {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.quote__status {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}

.quote__created {
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.quote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.quote__btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-xl);
  background-color: #fff;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: var(--transition-colors);
}
.quote__btn:hover {
  background-color: var(--slate-50);
}

.quote__btn--primary {
  border-width: 0;
  background-color: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.quote__btn--primary:hover {
  background-color: var(--blue-700);
}

.quote__btn-state {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.quote__btn-label-sm {
  display: none;
}

.quote__context {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--slate-200);
  font-size: 0.75rem;
  line-height: 1rem;
}

.quote__card {
  padding: 0.875rem;
  border: 1px solid rgb(226 232 240 / 0.8);
  border-radius: var(--radius-xl);
  background-color: #fff;
}

.quote__card--vehicle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.quote__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--slate-400);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quote__label--mb { margin-bottom: 0.125rem; }

.quote__client {
  display: block;
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.quote__contact {
  display: block;
  margin-top: 0.125rem;
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1rem;
}

.quote__portal {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--emerald-700);
  font-size: 11px;
  font-weight: 500;
}

.quote__car {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
}

.quote__vehicle {
  flex: 1;
  min-width: 0;
}

.quote__vehicle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.quote__plate {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-800);
  font-size: 10px;
}

.quote__vehicle-name {
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.quote__vehicle-sub {
  display: block;
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1rem;
}

.quote__table-wrap {
  padding-block: 1.25rem;
  overflow-x: auto;
}

.quote__table {
  width: 100%;
  min-width: 500px;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
}

.quote__table thead tr {
  border-bottom: 1px solid var(--slate-200);
  color: var(--slate-400);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Cells keep the browser's default 1px padding on the sides the design doesn't set */
.quote__table th {
  padding: 1px 1px 0.5rem;
  text-align: left;
  font-weight: 600;
}
.quote__table th.is-center { text-align: center; }
.quote__table th.is-right { text-align: right; }

.quote__table tbody tr {
  transition: var(--transition-colors);
}
.quote__table tbody tr:hover {
  background-color: rgb(255 255 255 / 0.6);
}
.quote__table tbody tr + tr {
  border-top: 1px solid var(--slate-100);
}

.quote__table td {
  padding: 0.625rem 1px;
}

.quote__type { font-weight: 500; }

.line-type {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 600;
}
.line-type--part { background-color: var(--blue-50); color: var(--blue); }
.line-type--labour { background-color: var(--purple-50); color: var(--purple-700); }
.line-type--service { background-color: var(--slate-100); color: var(--slate-700); }

.quote__table .quote__concept {
  padding-right: 0.5rem;
  color: var(--slate-800);
  font-weight: 500;
}

.quote__qty,
.quote__money,
.quote__discount,
.quote__total {
  font-family: var(--font-mono);
}
.quote__qty { text-align: center; color: var(--slate-700); }
.quote__money { text-align: right; color: var(--slate-700); }
.quote__discount { text-align: right; color: var(--slate-500); }
.quote__total { text-align: right; color: var(--slate-900); font-weight: 700; }

.quote__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--slate-200);
}

.quote__note {
  max-width: 24rem;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}
.quote__note > * + * {
  margin-top: 0.375rem;
}

.quote__note-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.quote__note-text {
  font-size: 11px;
  line-height: 1.625;
}

.quote__totals {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
}
.quote__totals > * + * {
  margin-top: 0.5rem;
}

.quote__totals-row {
  display: flex;
  justify-content: space-between;
  color: var(--slate-600);
}

.quote__totals-num {
  font-family: var(--font-mono);
  font-weight: 600;
}

.quote__totals-row--grand {
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.quote__grand {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .quote { padding: 2rem; }
  .quote__header { flex-direction: row; align-items: center; }
  .quote__btn-label-sm { display: inline; }
  .quote__context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote__bottom { flex-direction: row; align-items: flex-end; }
  .quote__totals { width: 16rem; }
}


/* --------------------------------------------------------------------------
   Efficiency: universal search
   -------------------------------------------------------------------------- */
.efficiency {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}

.efficiency__copy {
  text-align: left;
}

.efficiency__lead {
  margin-bottom: 1.5rem;
  color: var(--slate-600);
  font-size: 1rem;
  line-height: 1.625;
}

.efficiency__points {
  color: var(--slate-700);
  font-size: 0.75rem;
  line-height: 1rem;
}
.efficiency__points > * + * {
  margin-top: 0.875rem;
}

.efficiency__point {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.efficiency__point .icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.efficiency__photo {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}

.efficiency__photo-inner {
  position: relative;
  height: 11rem;
  overflow: hidden;
}

.efficiency__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.efficiency__photo:hover img {
  transform: scale(1.05);
}

.efficiency__photo-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(15 23 42 / 0.85), rgb(15 23 42 / 0.3), transparent);
}

.efficiency__photo-caption {
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.efficiency__photo-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.efficiency__photo-status > span:last-child {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.efficiency__pulse {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--emerald-400);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.efficiency__lifts {
  padding: 0.25rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.2);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Command palette mockup */
.palette {
  padding: 1.25rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-2xl);
  background-color: #fff;
  box-shadow: var(--shadow-soft-lg);
}

.palette__search {
  position: relative;
  margin-bottom: 1rem;
}

.palette__search > .icon {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  color: var(--slate-400);
}

.palette__search input {
  width: 100%;
  padding: 0.75rem 5rem 0.75rem 2.5rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  color: var(--slate-800);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-inner);
}
.palette__search input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue), var(--shadow-inner);
}

.palette__kbd {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 11px;
  transform: translateY(-50%);
}

.palette__quick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  color: var(--slate-500);
  font-size: 11px;
}

.palette__quick-label {
  color: var(--slate-400);
  font-weight: 600;
}

.palette__quick-chip {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--slate-100);
  color: var(--slate-700);
  cursor: pointer;
}
.palette__quick-chip:hover {
  background-color: var(--slate-200);
}

.palette__results > :not([hidden]) ~ :not([hidden]) {
  border-top: 1px solid var(--slate-100);
}

.palette__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-xl);
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  transition: var(--transition-colors);
}
.palette__result:hover {
  background-color: rgb(239 246 255 / 0.5);
}

.palette__result-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.palette__result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
  background-color: var(--slate-100);
  color: var(--slate-600);
  transition: var(--transition-colors);
}
.palette__result:hover .palette__result-icon {
  background-color: var(--blue);
  color: #fff;
}

.palette__result-title {
  display: block;
  color: var(--slate-800);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  transition: var(--transition-colors);
}
.palette__result:hover .palette__result-title {
  color: var(--blue);
}

.palette__result-sub {
  color: var(--slate-500);
  font-size: 11px;
}

.palette__result-side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.palette__result-badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background-color: var(--slate-100);
  color: var(--slate-600);
  font-size: 10px;
  font-weight: 500;
}

.palette__result-arrow {
  color: var(--slate-300);
  transition: all 150ms var(--ease);
}
.palette__result:hover .palette__result-arrow {
  color: var(--blue);
  transform: translateX(0.125rem);
}

.palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-400);
  font-size: 11px;
}

@media (min-width: 640px) {
  .palette { padding: 1.5rem; }
}
@media (min-width: 1024px) {
  .efficiency { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .efficiency__copy { grid-column: span 5 / span 5; }
  .efficiency__demo { grid-column: span 7 / span 7; }
}


/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background-color: var(--slate-50);
  transition: all 300ms var(--ease);
}
.testimonial:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-0.25rem);
}

.testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.testimonial__quote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue-50);
  color: var(--blue);
}

.testimonial__highlight {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius-full);
  background-color: var(--emerald-50);
  color: var(--emerald-700);
  font-size: 11px;
  font-weight: 600;
}

.testimonial__stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  color: var(--amber-400);
  font-size: 0.75rem;
  line-height: 1rem;
}

.testimonial__rating {
  margin-left: 0.375rem;
  color: var(--slate-400);
  font-size: 11px;
  font-weight: 500;
}

.testimonial__text {
  margin-bottom: 1.5rem;
  color: var(--slate-700);
  font-size: 0.875rem;
  line-height: 1.625;
  font-style: italic;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(226 232 240 / 0.8);
}

.testimonial__avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--blue-100);
}

.testimonial__name {
  display: block;
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.testimonial__role {
  display: block;
  color: var(--blue);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

.testimonial__location {
  display: block;
  color: var(--slate-500);
  font-size: 11px;
}

.savings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: var(--radius-2xl);
  background-image: linear-gradient(to right, var(--slate-900), var(--navy));
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.savings__info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.savings__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(96 165 250 / 0.3);
  border-radius: var(--radius-xl);
  background-color: rgb(37 99 235 / 0.3);
  color: var(--blue-400);
}

.savings__title {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.savings__text {
  color: var(--slate-300);
  font-size: 0.75rem;
  line-height: 1rem;
}

.savings__cta {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: var(--transition-colors);
}

@media (min-width: 640px) {
  .testimonial { padding: 1.75rem; }
  .savings { flex-direction: row; padding: 2rem; }
  .savings__title { font-size: 1.125rem; line-height: 1.75rem; }
  .savings__cta { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 768px) {
  .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__lead {
  color: var(--slate-600);
  font-size: 1rem;
  line-height: 1.5rem;
}

.faq > * + * {
  margin-top: 0.75rem;
}

.faq__item {
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-xl);
  background-color: var(--slate-50);
  transition: all 200ms var(--ease);
}
.faq__item[open] {
  border-color: var(--blue-200);
  background-color: #fff;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: var(--slate-900);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question > span {
  padding-right: 1rem;
}

.faq__chevron {
  flex-shrink: 0;
  color: var(--slate-400);
  transition: transform 200ms var(--ease);
}
.faq__item[open] .faq__chevron {
  color: var(--blue);
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0.75rem 1rem 1.25rem;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-600);
  font-size: 0.75rem;
  line-height: 1.625;
}

.faq__support {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-xl);
  background-color: rgb(239 246 255 / 0.6);
  color: var(--slate-600);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
}

.faq__support a {
  color: var(--blue);
  font-weight: 700;
}
.faq__support a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .faq__question { padding: 1.25rem; font-size: 1rem; line-height: 1.5rem; }
  .faq__answer { padding-inline: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }
  .faq__support { flex-direction: row; }
}


/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: 6rem;
  background-image: linear-gradient(to bottom, #fff, var(--slate-100));
}

.final-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 350px;
  background-color: rgb(37 99 235 / 0.1);
  filter: blur(100px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.final-cta__inner {
  position: relative;
  z-index: 10;
  text-align: center;
}

.final-cta__card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-3xl);
  background-color: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-2xl);
}

.final-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.final-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: contrast(1.25);
  transition: transform 700ms var(--ease);
}
.final-cta__card:hover .final-cta__bg img {
  transform: scale(1.05);
}

.final-cta__bg-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--navy), rgb(11 18 32 / 0.9), rgb(11 18 32 / 0.75));
}

.final-cta__content {
  position: relative;
  z-index: 10;
  max-width: 42rem;
  margin-inline: auto;
}

.final-cta__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(96 165 250 / 0.3);
  border-radius: var(--radius-full);
  background-color: rgb(59 130 246 / 0.2);
  color: var(--blue-300);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.final-cta__title {
  margin-bottom: 1rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.final-cta__text {
  margin-bottom: 2rem;
  color: var(--slate-300);
  font-size: 1rem;
  line-height: 1.625;
  text-wrap: balance;
}

.final-cta__action {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-xl);
  background-color: var(--blue);
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.25), 0 4px 6px -4px rgb(59 130 246 / 0.25);
  transition: all 150ms var(--ease);
}
.final-cta__btn:hover {
  box-shadow: 0 20px 25px -5px rgb(59 130 246 / 0.35), 0 8px 10px -6px rgb(59 130 246 / 0.35);
  transform: translateY(-0.125rem);
}

.final-cta__guarantees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--slate-400);
  font-size: 0.75rem;
  line-height: 1rem;
}

.final-cta__guarantee {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .final-cta__card { padding: 3rem; }
  .final-cta__title { font-size: 2.25rem; line-height: 2.5rem; }
  .final-cta__text { font-size: 1.125rem; line-height: 1.75rem; }
  .final-cta__guarantees { gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .final-cta__card { padding: 4rem; }
  .final-cta__title { font-size: 3rem; line-height: 1; }
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 4rem 0 3rem;
  border-top: 1px solid var(--slate-800);
  background-color: var(--navy);
  color: #fff;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgb(30 41 59 / 0.8);
}

.site-footer__brand {
  grid-column: span 2 / span 2;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.site-footer__logo img {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.25rem;
  object-fit: contain;
  border-radius: var(--radius-xl);
  background-color: #fff;
}

.site-footer__logo > span {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.site-footer__about {
  max-width: 24rem;
  margin-bottom: 1.5rem;
  color: var(--slate-400);
  font-size: 0.75rem;
  line-height: 1.625;
}

.site-footer__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.site-footer__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--emerald-500);
}

.site-footer__heading {
  margin-bottom: 1rem;
  color: var(--slate-200);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-footer__links {
  color: var(--slate-400);
  font-size: 0.75rem;
  line-height: 1rem;
}
.site-footer__links > * + * {
  margin-top: 0.625rem;
}

.site-footer__links a {
  transition: var(--transition-colors);
}
.site-footer__links a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  color: var(--slate-500);
  font-size: 0.75rem;
  line-height: 1rem;
}

.site-footer__made {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .site-footer__about { font-size: 0.875rem; line-height: 1.25rem; }
  .site-footer__bottom { flex-direction: row; }
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Video modal
   -------------------------------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgb(2 6 23 / 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 64rem;
}

.video-modal__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.1);
  color: #fff;
  transition: var(--transition-colors);
}
.video-modal__close:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.video-modal__frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  background-color: #000;
  box-shadow: var(--shadow-2xl);
}

@media (min-width: 640px) {
  .video-modal { padding: 2rem; }
  .video-modal__close { right: -0.5rem; }
}


/* --------------------------------------------------------------------------
   Helpers (kept last so they win over component colours)
   -------------------------------------------------------------------------- */
.text-blue { color: var(--blue); }
.text-blue-400 { color: var(--blue-400); }
.text-emerald { color: var(--emerald-600); }
.text-emerald-400 { color: var(--emerald-400); }
.text-emerald-700 { color: var(--emerald-700); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-700 { color: var(--slate-700); }

.mono { font-family: var(--font-mono); }

/* Licence-plate typography */
.plate {
  font-family: var(--font-plate);
  letter-spacing: 0.08em;
  font-weight: 700;
}

.balance { text-wrap: balance; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__float,
  .hero__badge,
  .mobile-menu__glow--bottom { animation: none; }
}