.demo-page {
  --demo-page: min(1120px, calc(100% - 160px));
  background: #f5f6fa;
}
.demo-pwa-status { display: inline-flex; align-items: center; gap: 7px; margin: -4px 0 17px; padding: 7px 10px; color: #5f34d5; border: 1px solid #ddd1fb; border-radius: 999px; background: rgba(255,255,255,.72); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.demo-pwa-status::before { width: 7px; height: 7px; border-radius: 50%; background: #6d28d9; content: ''; box-shadow: 0 0 0 4px rgba(109,40,217,.1); }
.demo-install-button { min-height: 38px; padding: 0 12px; color: #542c9d; border: 1px solid #d9cbed; border-radius: 10px; background: rgba(255,255,255,.9); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.demo-install-button:hover { border-color: #9c7add; background: #fbf9ff; }
.demo-page .site-header .header-actions .button-small { width:118px; min-width:118px; padding-inline:12px; font-size:13px; white-space:nowrap; }
.demo-app-nav { display: none; }
.demo-page .site-header .main-nav a[aria-current="page"] { color: var(--violet-dark); font-weight: 800; }
.demo-page .site-header,
.demo-hero,
.demo-selection,
.demo-final { width: var(--demo-page); margin-inline: auto; }
.demo-hero { min-height: 0; margin-top: 28px; padding: 92px 0 24px; display: block; overflow: visible; border: 0; border-radius: 0; background: transparent; text-align: center; }
.demo-hero > div { max-width: 940px; margin-inline: auto; }
.demo-hero h1 { max-width: 900px; margin: 0 auto; color: #1b1530; font-size: clamp(36px,4.2vw,56px); font-weight: 700; line-height: 1.07; letter-spacing: -2.6px; }
.demo-hero p:not(.eyebrow) { max-width: 790px; margin: 27px auto 0; color: #656276; font-size: 18px; line-height: 1.7; }
.demo-hero aside { padding: 26px; display: grid; grid-template-columns: 35px 1fr; column-gap: 15px; row-gap: 8px; border: 1px solid rgba(124,58,237,.18); border-radius: 22px; background: rgba(255,255,255,.75); box-shadow: 0 18px 45px rgba(75,50,125,.08); }
.demo-hero aside span { width: 32px; height: 32px; display: grid; place-items: center; color: #6d28d9; border-radius: 10px; background: #eee7ff; font-size: 12px; font-weight: 800; }
.demo-hero aside strong { align-self: center; color: #30294a; font-size: 15px; }
.demo-hero aside small { grid-column: 2; margin: -2px 0 13px; color: #777389; font-size: 13px; line-height: 1.55; }
.demo-hero aside small:last-child { margin-bottom: 0; }
.demo-selection { margin-top: 104px; }
.demo-heading { margin-bottom: 34px; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.6fr); align-items: end; gap: 40px; }
.demo-heading .eyebrow { margin-bottom: 15px; }
.demo-heading h2 { max-width: 680px; margin: 0; color: #1f1b2e; font-size: clamp(31px,3.7vw,48px); line-height: 1.1; letter-spacing: -2.2px; }
.demo-heading > p { margin: 0 0 4px; color: #6d6b78; font-size: 15px; line-height: 1.7; }
.demo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.demo-card { min-height: 505px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e2e3ea; border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(38,31,59,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.demo-card:hover { border-color: #d6c5ff; box-shadow: 0 22px 55px rgba(82,48,145,.13); transform: translateY(-4px); }
.demo-card figure { height: 210px; margin: 0; overflow: hidden; border-bottom: 1px solid #eeeef3; background: #f2eff9; }
.demo-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.demo-card:hover figure img { transform: scale(1.04); }
.demo-card-copy { padding: 24px 24px 15px; }
.demo-card-copy > span { color: #7042cd; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.demo-card h3 { margin: 10px 0 8px; color: #252039; font-size: 23px; letter-spacing: -.9px; }
.demo-card p { margin: 0; color: #777586; font-size: 14px; line-height: 1.65; }
.demo-card-actions { margin-top: auto; padding: 12px 24px 24px; display: grid; gap: 14px; }
.demo-card-actions .button { width: 100%; min-height: 48px; font-size: 14px; }
.demo-card-actions > a:not(.button) { color: #6d28d9; font-size: 14px; font-weight: 750; }
.demo-card-actions > a:not(.button) b { margin-left: 5px; font-size: 17px; }

/* DriveNova card preview: a car-rental visual, not a generic storefront mockup. */
.demo-drive-visual{position:relative;isolation:isolate;display:block!important;overflow:hidden;background:linear-gradient(145deg,#062a32,#071c25 58%,#0d3d45)!important;color:#fff}
.demo-drive-visual:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 72% 24%,rgba(247,185,28,.28),transparent 30%),linear-gradient(110deg,transparent 0 28%,rgba(255,255,255,.1) 28.5% 29%,transparent 29.5% 55%,rgba(255,255,255,.08) 55.5% 56%,transparent 56.5%),repeating-linear-gradient(163deg,transparent 0 22px,rgba(255,255,255,.05) 23px 25px)}
.demo-drive-brand{position:absolute;top:24px;left:25px;font-size:25px;font-style:italic;font-weight:950;letter-spacing:-.06em}.demo-drive-brand span{color:#f7b91c}.demo-drive-brand small{display:block;margin-top:3px;color:#c9d7d8;font-size:9px;font-style:normal;letter-spacing:.03em}
.demo-drive-car{position:absolute;right:8%;bottom:41px;width:64%;height:76px;border-radius:43px 68px 22px 22px;transform:skewX(-7deg);background:linear-gradient(160deg,#5fa9d0,#145180 34%,#062133 72%,#011018);box-shadow:0 18px 23px rgba(0,0,0,.42),inset 0 2px 0 rgba(255,255,255,.3)}.demo-drive-car:before{content:"";position:absolute;left:24%;top:-41px;width:48%;height:53px;border-radius:70px 80px 8px 8px;background:linear-gradient(155deg,#7fb9cf,#0a3655 57%,#031720);border:2px solid rgba(255,255,255,.3)}.demo-drive-car:after{content:"";position:absolute;left:35%;top:-29px;width:35%;height:28px;border-radius:11px 20px 0 0;background:linear-gradient(140deg,rgba(154,208,229,.7),rgba(4,30,43,.8))}.demo-drive-car i,.demo-drive-car b{position:absolute;bottom:-16px;width:37px;height:37px;border-radius:50%;background:#06121a;border:7px solid #56656a;box-shadow:inset 0 0 0 5px #152a31}.demo-drive-car i{left:15px}.demo-drive-car b{right:18px}.demo-drive-car em{position:absolute;right:4%;top:40%;width:27px;height:13px;border-radius:0 10px 10px 0;background:#f7b91c;box-shadow:-64px 0 0 -2px rgba(247,185,28,.7)}
.demo-drive-offer{position:absolute;top:34px;right:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:77px;height:77px;border-radius:50%;background:#f7b91c;color:#06242b;font-size:19px;line-height:1;box-shadow:0 0 0 4px rgba(247,185,28,.25)}.demo-drive-offer small{margin-top:4px;font-size:6px;line-height:1.1;text-align:center}.demo-drive-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:6px}.demo-drive-dots i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9}.demo-drive-dots i:nth-child(2){background:#f7b91c}
.demo-final { margin-top: 96px; margin-bottom: 84px; padding: 50px 56px; display: flex; align-items: center; justify-content: space-between; gap: 36px; overflow: hidden; position: relative; border-radius: 28px; color: #fff; background: linear-gradient(120deg,#2e1065,#6d28d9 62%,#2563a8); }
.demo-final::before { width: 420px; height: 420px; position: absolute; right: -100px; top: -260px; border-radius: 50%; background: rgba(255,255,255,.12); content: ''; }
.demo-final > * { position: relative; z-index: 1; }
.demo-final .eyebrow { margin-bottom: 15px; color: #ddd6fe; }
.demo-final h2 { max-width: 680px; margin: 0; font-size: clamp(30px,3.8vw,46px); line-height: 1.1; letter-spacing: -2px; }
.demo-final p:not(.eyebrow) { max-width: 720px; margin: 16px 0 0; color: #ede9fe; line-height: 1.7; }
.demo-final .button { min-width: 215px; white-space: nowrap; }
.desa-demo-section { width: var(--demo-page); margin: 96px auto 0; padding: 48px 52px 52px; border: 1px solid #e5def8; border-radius: 30px; background: linear-gradient(135deg, #fbfaff, #f2edff); box-shadow: 0 18px 48px rgba(75,50,125,.06); }
.desa-demo-heading { margin-bottom: 30px; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.62fr); align-items: end; gap: 40px; }
.desa-demo-heading .eyebrow { margin-bottom: 15px; }
.desa-demo-heading h2 { max-width: 660px; margin: 0; color: #1f1b2e; font-size: clamp(30px,3.4vw,44px); line-height: 1.1; letter-spacing: -2px; }
.desa-demo-heading > p { margin: 0 0 3px; color: #6d6b78; font-size: 15px; line-height: 1.7; }
.desa-demo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.desa-demo-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e2e3ea; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(38,31,59,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.desa-demo-card:hover { border-color: #d6c5ff; box-shadow: 0 18px 40px rgba(82,48,145,.13); transform: translateY(-3px); }
.desa-demo-card figure { height: 260px; margin: 0; overflow: hidden; border-bottom: 1px solid #eeeef3; background: #f2eff9; }
.desa-demo-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.desa-demo-card:hover figure img { transform: scale(1.04); }
.desa-demo-card-copy { padding: 22px 24px 12px; }
.desa-demo-card-copy > span { color: #7042cd; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.desa-demo-card h3 { margin: 9px 0 7px; color: #252039; font-size: 23px; line-height: 1.15; letter-spacing: -.8px; }
.desa-demo-card p { margin: 0; color: #777586; font-size: 13px; line-height: 1.58; }
.desa-demo-card-meta { display:block; margin-top:12px; color:#178558; font-size:10px; font-weight:800; }
.desa-demo-actions { margin-top: auto; padding: 12px 24px 24px; display: grid; gap: 9px; }
.desa-demo-actions .button { width: 100%; min-height: 42px; padding-inline: 12px; font-size: 12px; }
.desa-demo-actions .button-light { border: 1px solid #e1d8f8; color: #6d28d9; background: #fbfaff; }
.desa-demo-actions .button-light:hover { border-color: #c9b5ff; background: #f3edff; }
.desa-demo-actions b { margin-left: 4px; font-size: 15px; }
.desa-demo-how { width:var(--demo-page); margin:96px auto 0; padding:54px 0 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:center; border-top:1px solid #e2dff0; }
.desa-demo-how h2 { max-width:560px; margin:0; color:#211b31; font-size:clamp(30px,3.5vw,45px); line-height:1.08; letter-spacing:-2px; }
.desa-demo-how p:not(.eyebrow) { max-width:560px; margin:16px 0 0; color:#777586; line-height:1.7; }
.desa-demo-how-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; }
.desa-demo-how-flow article { min-height:145px; padding:20px; display:flex; flex-direction:column; border:1px solid #e2e3ea; border-radius:18px; background:#fff; }
.desa-demo-how-flow article span { color:#6d28d9; font-size:10px; font-weight:850; }
.desa-demo-how-flow article strong { margin-top:28px; color:#30294a; font-size:14px; }
.desa-demo-how-flow article small { margin-top:7px; color:#777586; font-size:11px; line-height:1.45; }
.desa-demo-how-flow i { color:#9a8db6; font-size:22px; font-style:normal; }
@media (max-width:1100px) { .desa-demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) { .demo-hero { padding: 62px 0 24px; }.demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.demo-heading,.desa-demo-heading,.desa-demo-how { grid-template-columns: 1fr; gap: 15px; }.demo-final { align-items: flex-start; flex-direction: column; }.desa-demo-how-flow { grid-template-columns:repeat(3,1fr); }.desa-demo-how-flow i { display:none; } }
@media (display-mode:standalone) { .demo-page { padding-bottom: env(safe-area-inset-bottom); }.demo-page .site-header { padding-top: max(10px, env(safe-area-inset-top)); }.demo-app-nav { position: fixed; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); left: 16px; z-index: 40; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 7px; border: 1px solid rgba(73,45,93,.12); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 14px 36px rgba(46,16,101,.16); backdrop-filter: blur(16px); }.demo-app-nav a,.demo-app-nav button { display: grid; place-items: center; gap: 3px; min-height: 44px; color: #706277; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; }.demo-app-nav a:hover,.demo-app-nav button:hover { color: #6d28d9; background: #f6f1fb; }.demo-app-nav span { font-size: 16px; line-height: 1; } }
@media (max-width:620px) { .demo-page { --demo-page: calc(100% - 24px); padding-bottom: 84px; }.demo-hero,.demo-selection,.desa-demo-section,.demo-final,.desa-demo-how { width: var(--demo-page); }.demo-hero { min-height: 0; margin-top: 16px; padding: 46px 0 28px; }.demo-hero h1 { font-size: clamp(34px,10.5vw,44px); letter-spacing: -2px; }.demo-hero p:not(.eyebrow) { font-size: 15px; }.demo-selection { margin-top: 65px; }.demo-heading h2,.desa-demo-heading h2,.desa-demo-how h2 { font-size: clamp(28px,8vw,36px); letter-spacing: -1.5px; }.demo-grid,.desa-demo-grid,.desa-demo-how-flow { grid-template-columns: 1fr; gap: 16px; }.demo-card { min-height: 0; border-radius: 20px; }.demo-card figure { height: 225px; }.demo-card-copy { padding: 22px 20px 12px; }.demo-card-actions { padding: 12px 20px 22px; }.desa-demo-section { margin-top: 65px; padding: 34px 20px 22px; border-radius: 24px; }.desa-demo-card figure { height: 250px; }.desa-demo-card-copy { padding-inline: 20px; }.desa-demo-actions { padding-inline: 20px; }.desa-demo-how { margin-top:65px; padding-top:38px; }.desa-demo-how-flow i { display:none; }.demo-final { margin-top: 62px; margin-bottom: 40px; padding: 34px 24px; border-radius: 24px; }.demo-final h2 { font-size: 29px; letter-spacing: -1.3px; }.demo-final .button { width: 100%; }.demo-page .site-footer { padding-bottom: 94px; }.demo-app-nav { position: fixed; right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); left: 10px; z-index: 40; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 7px; border: 1px solid rgba(73,45,93,.12); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 12px 32px rgba(46,16,101,.16); backdrop-filter: blur(16px); }.demo-app-nav a,.demo-app-nav button { display: grid; place-items: center; gap: 2px; min-height: 46px; color: #706277; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; }.demo-app-nav a:hover,.demo-app-nav button:hover { color: #6d28d9; background: #f6f1fb; }.demo-app-nav span { font-size: 17px; line-height: 1; } }