@font-face { font-family: Pretendard; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/pretendard-500.woff2') format('woff2'); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.overview { color-scheme: light; color: #1a2128; background: #fff; padding-block: 100px; }
.overview__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.overview__copy { padding-right: 40px; }
.overview h2 { margin: 0; font-size: clamp(28px, 2.777778vw, 40px); font-weight: 700; line-height: 1.25; letter-spacing: 0; word-break: keep-all; }
.overview-title__mobile-break { display: none; }
.overview__copy > p { margin: 40px 0; font-size: 17px; line-height: 25.5px; font-weight: 500; color: #505c66; word-break: keep-all; }
.overview__download { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: -5px; font-size: 17px; font-weight: 600; color: #0099e8; }
.overview__download img { transition: transform 180ms ease; }
.overview__download:hover img { transform: translateX(3px); }
.overview :focus-visible { outline-color: #00afff; }
.overview__visual { --demo-padding: clamp(32px, 6svh, 64px); --phone-width-ratio: .62; --phone-max-width: 400; position: relative; isolation: isolate; min-width: 0; width: 100%; height: min(940px, calc(100svh - var(--header-height) - 48px)); padding-block: var(--demo-padding); margin: 0; background: #f2f4f6; border-radius: 40px; overflow: hidden; }
.demo-stage { position: absolute; top: 50%; left: 50%; width: 640px; height: 694px; transform: translate(-50%, -50%) scale(var(--demo-scale, 1)); transform-origin: center; pointer-events: none; user-select: none; }
.demo-phone { position: absolute; top: 48px; left: 175.374px; width: 289.969px; height: 597.662px; background: #e7e3bf; border: .709px solid #524b40; border-radius: 43.956px; box-shadow: inset 0 0 0 2.127px #c3c3c3, inset 0 0 0 3.545px #fff; }
.demo-phone::before, .demo-phone::after { content: ''; position: absolute; z-index: -1; background: linear-gradient(90deg,#524b40,#e7e3bf,#817e73); width: 3.545px; border-radius: 1px; }
.demo-phone::before { left: -2.127px; top: 148px; height: 39.7px; box-shadow: 0 51.75px #aaa79c; }
.demo-phone::after { right: -2.127px; top: 245.3px; height: 70.9px; }
.demo-phone__edge { position: absolute; left: 2.127px; top: 2.127px; width: 284.297px; height: 591.99px; border-radius: 41.12px; background: #000100; box-shadow: inset 0 0 2.481px 1.418px #879194; }
.demo-phone__screen { position: absolute; left: 7.555px; top: 8.053px; width: 273.442px; height: 579.257px; border-radius: 34px; background: #fff; overflow: hidden; isolation: isolate; }
.demo-page { position: absolute; inset: 0; background: #fff; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.demo-page[data-scene='home'] { opacity: 1; visibility: visible; }
.demo-home { background: #fff; }
.demo-home__scroll { position: absolute; inset: 0; will-change: transform; }
.demo-home__header { position: absolute; left: 0; top: 13.238px; }
.demo-home__feed { position: absolute; left: 0; top: 132.895px; width: 274px; height: 1400px; background: #f2f4f6; }
.demo-feed-card { position: absolute; left: 11.863px; }
.demo-feed-card--maintenance { top: 360.671px; }
.demo-feed-card--records { top: 606.55px; }
.demo-feed-card--reports { top: 831.047px; }
.demo-feed-card--recalls { top: 1039.817px; }
.demo-feed-card--insurance { top: 1248.588px; }
.demo-bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 108px; background: linear-gradient(0deg,#f2f4f6 0%,#f2f4f6 43%,rgba(242,244,246,0)); pointer-events: none; }
.demo-tabs { position: absolute; left: 3.661px; top: 518.46px; }
.demo-fab { position: absolute; left: .442px; top: 454.674px; }
.demo-menu-dim { position: absolute; inset: 0; background: #0009; opacity: 0; }
.demo-fab-menu { position: absolute; top: 0; left: 0; opacity: 0; transform-origin: 235px 490px; }
.demo-stats { position: absolute; top: 145.048px; left: 11.863px; width: 249.136px; height: 74.612px; }
.demo-stat { position: absolute; top: 0; left: 0; border-radius: 9.115px; transform-origin: center; }
.demo-stat + .demo-stat { left: 127.606px; }
.demo-mileage-value { position: absolute; top: 111.511px; left: 27.4px; display: flex; align-items: center; width: 180px; height: 20px; background: #fff; font-size: 12.939px; line-height: 20px; font-weight: 600; color: #1a2128; }
.demo-mileage-value::after { content: ''; height: 14px; width: 1px; margin-left: 2px; background: #00afff; }
.demo-mileage-value.is-complete::after { display: none; }
.demo-services__title { position: absolute; top: 26px; left: 15.222px; font-size: 12.178px; font-weight: 700; }
.demo-services__grid { position: absolute; top: 50.027px; left: 0; }
.demo-services__recommended { position: absolute; top: 315.616px; left: 0; }
.demo-booking-screen, .demo-confirmed-screen { position: absolute; top: 0; left: 0; }
.demo-booking-sheet { position: absolute; top: 0; left: 0; will-change: transform; }
.demo-booking-map-controls { position: absolute; top: 124.938px; left: -1.639px; opacity: 0; will-change: transform, opacity; }
.demo-time-selection { position: absolute; top: 402.127px; left: 14.584px; width: 44.906px; height: 27.4px; border: 1px solid #00afff; border-radius: 6px; background: #fff; opacity: 0; }
.demo-time-selection::after { content: '09:00'; position: absolute; inset: 0; display: grid; place-items: center; color: #00afff; font-size: 11.417px; line-height: 17px; font-weight: 500; }
.demo-booking-selected { position: absolute; top: 522px; left: 0; width: 274px; height: 58px; padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; opacity: 0; }
.demo-booking-selected > div { display: flex; flex-direction: column; gap: 3px; }
.demo-booking-selected small { color: #8e98a0; font-size: 8px; }
.demo-booking-selected strong { font-size: 9px; font-weight: 600; }
.demo-booking-selected > span { display: grid; place-items: center; width: 93px; height: 37px; color: white; background: #00afff; border-radius: 8px; font-size: 11.4px; font-weight: 700; }
.demo-maintenance-screen { position: absolute; left: 0; top: 0; will-change: transform; }
/* Crop only the original floating card; the existing list stays visible below it. */
.demo-maintenance-notice { position: absolute; left: 15.18px; top: 17.92px; width: 242.97px; height: 111.66px; border-radius: 15.19px; overflow: hidden; background: #fff; box-shadow: 0 3px 9px rgba(26,33,40,.12); transform-origin: center top; opacity: 0; will-change: transform, opacity; }
.demo-maintenance-notice img { position: absolute; left: -15.18px; top: -17.92px; }
.demo-tap { position: absolute; z-index: 20; width: 24px; height: 24px; margin: -12px; border-radius: 50%; border: 2px solid #00afff; background: #00afff24; opacity: 0; pointer-events: none; }
.demo-playback { position: absolute; z-index: 2; right: 20px; bottom: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e1e5e9; border-radius: 50%; background: #ffffffd9; color: #505c66; transition: background-color 180ms ease; }
.demo-playback:hover { background: #fff; }
.demo-playback::before { content: ''; position: absolute; inset: -4px; }
.demo-playback span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.demo-playback[aria-pressed='true'] span { width: 0; height: 0; margin-left: 3px; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
@media (max-width: 900px) {
  .overview { padding-block: 72px; }
  .overview__layout { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .overview__copy { padding-right: 0; }
  .overview h2 { font-size: clamp(27px, 8.1425vw, 36px); line-height: 1.3; }
  .overview-title__mobile-break { display: inline; }
  .overview__copy > p { margin-block: 24px; font-size: 16px; line-height: 24px; }
  .overview__visual { --phone-width-ratio: .72; --phone-max-width: 340; height: min(calc((100vw - var(--gutter) * 2) * 1.484 + var(--demo-padding) * 2), 780px, calc(100svh - var(--header-height) - 40px)); border-radius: 24px; }
  .demo-playback { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .demo-playback { display: none; } }