/* Premium hero: the rest of the supplied website keeps its original design. */
body { padding-bottom: 0; }
.premium-header .nav-row { height: 88px; }
.premium-header .nav-actions { display: flex; gap: 12px; }
.premium-header .nav-actions .icon-button { display: inline-flex; width: 42px; height: 42px; min-width: 42px; padding: 0; background: transparent; border: 0; }
.premium-header .nav-actions svg { width: 20px; height: 20px; }
.premium-hero, html[data-theme=dark] .premium-hero { height: min(900px, 100svh); min-height: 680px; padding: 88px 0 0; background: var(--bg); isolation: isolate; }
.premium-hero::before, .premium-hero::after { display: none; }
.hero-motion { position: absolute; inset: 88px 0 0; width: 100%; height: calc(100% - 88px); object-fit: cover; object-position: 68% center; z-index: -3; }
.hero-shade { position: absolute; inset: 88px 0 0; background: linear-gradient(90deg, #fff 0%, #fffffff5 23%, #ffffffd9 35%, #ffffff60 53%, #ffffff00 75%); z-index: -2; }
html[data-theme=dark] .hero-shade { background: linear-gradient(90deg, #0b1220 0%, #0b1220f2 23%, #0b1220c9 36%, #0b12204d 57%, #0b122000 78%); }
.premium-hero .hero-inner { height: 100%; width: 100%; display: flex; align-items: center; padding-bottom: 12px; }
.premium-copy { width: 47%; max-width: 570px; }
.premium-copy h1 { font-size: clamp(3.5rem, 5.3vw, 5.7rem); font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }
.premium-copy>p { max-width: 340px; font-size: 1rem; line-height: 1.7; color: var(--muted); margin: 28px 0 0; }
.premium-shortcuts { display: flex; gap: 22px; margin-top: 38px; }
.hero-shortcut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shortcut-circle { width: 48px; height: 48px; border: 1px solid #a1a8b466; border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.shortcut-circle svg { width: 20px; height: 20px; }
.shortcut-label { font-size: 11px; color: var(--muted); }
.hero-shortcut:hover .shortcut-circle { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-3px); }
#motion-toggle { position: absolute; bottom: 24px; right: 28px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff75; border-radius: 50%; background: #10151d66; color: #fff; }
#motion-toggle svg { width: 17px; height: 17px; }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-intro { position: sticky; top: 130px; }
.contact-intro h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; margin-bottom: 24px; }
.contact-intro>p:not(.eyebrow) { color: var(--muted); max-width: 420px; }
.contact-intro .individual-offer { margin-top: 30px; font-size: .875rem; }
.contact-intro .text-link { overflow-wrap: anywhere; }
#contact-form { min-width: 0; position: relative; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.form-grid label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: .8125rem; font-weight: 500; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input,.form-grid select,.form-grid textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 13px 14px; font: inherit; font-size: 1rem; color: var(--ink); min-height: 48px; }
.form-grid textarea { resize: vertical; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { outline: 2px solid var(--blue-tx); outline-offset: 2px; }
.optional { color: var(--muted); font-weight: 400; font-size: .75rem; }
.form-notice { color: var(--muted); font-size: .75rem; line-height: 1.7; margin: 20px 0; }
.form-submit { border-radius: 8px; width: 100%; padding: 15px 24px; box-shadow: none; }
.form-submit:disabled { opacity: .6; cursor: wait; }
#form-status { margin: 18px 0 0; font-size: .875rem; }
#form-status[data-state=error] { color: #bc2424; }
html[data-theme=dark] #form-status[data-state=error] { color: #fca5a5; }
#form-status[data-state=success] { color: #16804a; }
html[data-theme=dark] #form-status[data-state=success] { color: #86efac; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(min-width:1500px) { .premium-hero .hero-motion { object-position: center 52%; } }
@media(max-width:900px) { .premium-copy { width: 53%; } .premium-copy h1 { font-size: 3.8rem; } .contact-section { gap: 36px; } }
@media(max-width:600px) {
 .premium-header .nav-row { height: 76px; gap: 8px; }
 .premium-header .brand,.premium-header .logo-crop { width: 152px; }
 .premium-header .logo-crop img { width: 198px; left: -24px; top: -16px; }
 .premium-header .nav-actions { gap: 2px; }
 .premium-header .nav-actions .icon-button { width: 38px; min-width: 38px; height: 42px; }
 .premium-header .wrap { padding-inline: 20px; }
 .premium-hero,html[data-theme=dark] .premium-hero { min-height: 760px; height: 100svh; max-height: 900px; padding-top: 76px; }
 .hero-motion { top: auto; bottom: 0; height: 50%; object-position: 78% center; }
 .hero-shade { inset: 0; background: linear-gradient(180deg,#fff 0%,#fff 47%,#ffffff00 71%); }
 html[data-theme=dark] .hero-shade { background: linear-gradient(180deg,#0b1220 0%,#0b1220 47%,#0b122000 71%); }
 .premium-hero .hero-inner { align-items: flex-start; padding-top: 48px; padding-inline: 24px; }
 .premium-copy { width: 100%; max-width: none; }
 .premium-copy h1 { font-size: clamp(3.4rem, 14vw, 4.4rem); }
 .premium-copy>p { font-size: .9375rem; max-width: 300px; margin-top: 22px; }
 .premium-shortcuts { margin-top: 24px; gap: 22px; }
 .shortcut-circle { width: 44px; height: 44px; }
 #motion-toggle { bottom: 16px; right: 20px; }
 .contact-section { grid-template-columns: 1fr; gap: 32px; }
 .contact-intro { position: static; }
 .form-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .shortcut-circle { transition: none; } }

/* Full hero video with a blended text layer. Stretching keeps the complete frame. */
.premium-hero .hero-motion { inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: center; mask-image: none; }
.premium-hero .hero-shade { inset: 0; background: linear-gradient(90deg, #fffffff5 0%, #ffffffdf 22%, #ffffffad 38%, #ffffff48 57%, #ffffff00 78%); }
html[data-theme=dark] .premium-hero .hero-shade { background: linear-gradient(90deg, #0b1220f5 0%, #0b1220e0 22%, #0b1220b0 38%, #0b122050 57%, #0b122000 78%); }
@media(max-width:600px) {
 .premium-hero .hero-shade { background: linear-gradient(180deg,#fffffff2 0%,#ffffffeb 24%,#ffffffc4 43%,#ffffff55 61%,#ffffff00 83%); }
 html[data-theme=dark] .premium-hero .hero-shade { background: linear-gradient(180deg,#0b1220f2 0%,#0b1220eb 24%,#0b1220c4 43%,#0b122055 61%,#0b122000 83%); }
}

/* Minimal footer navigation, centered between brand and direct contacts. */
.footer { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: start; gap: 32px; padding-top: 48px; }
.footer-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: 12px 20px; padding-top: 4px; }
.footer-shortcuts a { color: var(--muted); font-size: .75rem; line-height: 1.6; transition: color .2s; }
.footer-shortcuts a:hover { color: var(--ink); }
.footer .footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: .75rem; text-align: right; }
.footer .copyright { grid-column: 1 / -1; text-align: center; margin-top: 0; }
.premium-copy h1 { font-size: clamp(3.1rem, 4.5vw, 4.8rem); }
@media(max-width:900px) { .footer { grid-template-columns: 1fr 1.4fr; } .footer-shortcuts { justify-content: flex-end; } .footer .footer-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: center; } }
@media(max-width:600px) { .footer { grid-template-columns: 1fr; gap: 28px; justify-items: center; } .footer>div:first-child { text-align: center; } .footer-shortcuts { justify-content: center; gap: 12px 18px; max-width: 330px; } .footer .footer-links { flex-direction: column; align-items: center; } .premium-copy h1 { font-size: clamp(2.8rem, 11.7vw, 3.6rem); } }

/* Clearly visible, centered footer shortcuts. */
.footer-shortcuts { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 32px; row-gap: 12px; }
.footer-nav-label { grid-column: 1 / -1; color: var(--muted); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 4px; }
.footer-shortcuts a { font-size: .875rem; color: var(--ink); }
.footer-shortcuts a:hover { color: var(--blue-tx); }
@media(max-width:900px) { .footer-shortcuts { justify-content: center; } }
@media(max-width:600px) { .footer-shortcuts { width: 100%; max-width: 330px; justify-content: space-between; column-gap: 18px; } }

/* Navigation in the top bar, between the logo and contact icons. */
.premium-header .nav-row { gap: 20px; }
.header-shortcuts { display: flex; flex: 1; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.header-shortcuts a { color: var(--ink); font-size: .75rem; line-height: 1.4; white-space: nowrap; padding: 5px 0; transition: color .2s; }
.header-shortcuts a:hover { color: var(--blue-tx); }
.premium-header .nav-actions { flex-shrink: 0; }
@media(max-width:1100px) {
 .premium-header .nav-row { height: auto; min-height: 88px; display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding-block: 12px; }
 .header-shortcuts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 22px; padding: 8px 0 2px; scrollbar-width: thin; }
 .premium-header .nav-actions { grid-column: 2; grid-row: 1; }
 .header-shortcuts a { padding-block: 8px; }
 html { scroll-padding-top: 140px; }
 .premium-hero, html[data-theme=dark] .premium-hero { padding-top: 124px; }
}
@media(max-width:600px) { .premium-header .nav-row { gap: 0 8px; } .header-shortcuts { gap: 20px; } .header-shortcuts a { font-size: .75rem; } .premium-hero, html[data-theme=dark] .premium-hero { padding-top: 124px; } }

/* Actual app demonstrations retain the full captured viewport. */
.module-screen img,.module-screen.cropped img,.driver-screen img{width:100%;height:auto;max-height:none;aspect-ratio:8/5;object-fit:contain;object-position:center;transform:none}
.driver-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-play-toggle{display:block;margin:12px 0 0;padding:7px 0;border:0;background:transparent;color:var(--muted);font-size:.8rem}
.demo-play-toggle:hover{color:var(--blue)}
.image-dialog .demo-play-toggle{margin:12px auto}
@media(max-width:700px){.driver-gallery{grid-template-columns:1fr}}


/* User recordings retain their original aspect ratio. */
.demo-video-frame{display:block;position:relative;min-height:0;padding:8px}
.demo-video-frame .demo-video{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#111;border-radius:8px}
.demo-expand{display:block;margin:10px 2px 2px auto;padding:5px 8px;border:0;background:transparent;color:var(--muted);font-size:.8rem}
.demo-expand:hover{color:var(--blue)}
.image-dialog{width:min(96vw,1600px);max-width:96vw}
#enlarged-video{display:block;width:100%;max-height:80vh;background:#111;object-fit:contain}

/* Consistent vector action icons, including on mobile Safari. */
.action-icon{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;margin-left:5px;stroke:currentColor}
.demo-expand{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 12px;border-radius:10px;transition:background-color .2s,color .2s}
.demo-expand .action-icon{width:18px;height:18px;margin:0}
.demo-expand:hover{background:rgba(99,179,237,.08)}
.form-submit .action-icon{margin:0}
@media(prefers-reduced-motion:reduce){.demo-expand{transition:none}}