:root { --detail-blue:#064dec; --detail-ink:#121923; --detail-muted:#66707f; --detail-line:#dfe5ef; --detail-soft:#f4f7fc; }
.detail-main { overflow:hidden; color:var(--detail-ink); }
.detail-shell { width:min(1400px,calc(100% - 112px)); margin-inline:auto; }
.detail-skip { position:fixed; z-index:10000; top:10px; left:10px; padding:12px 18px; color:#fff; background:#064dec; transform:translateY(-180%); }
.detail-skip:focus { transform:translateY(0); }
.detail-main a:focus-visible,.detail-main button:focus-visible { outline:3px solid #245ff0; outline-offset:4px; }
.detail-hero { min-height:700px; padding-top:72px; padding-bottom:92px; display:grid; grid-template-columns:0.9fr 1.1fr; align-items:stretch; gap:6%; }
.detail-hero-copy { align-self:center; padding:22px 0; }
.detail-back,.detail-text-link { color:#34465e; font-size:14px; font-weight:650; text-decoration:none; }
.detail-back { display:inline-flex; gap:10px; align-items:center; margin-bottom:86px; }
.detail-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 24px; font-size:12px; letter-spacing:.12em; font-weight:750; color:#1854cf; text-transform:uppercase; }
.detail-eyebrow span { width:27px; height:2px; background:var(--detail-blue); flex:none; }
.detail-eyebrow b { font-weight:400; color:#9ea9ba; }
.detail-hero h1 { margin:0; max-width:660px; font-size:clamp(48px,5.3vw,82px); font-weight:680; line-height:1.12; letter-spacing:-.055em; word-break:normal; }
.detail-intro { margin:28px 0 0; max-width:510px; color:#586577; font-size:17px; line-height:1.9; }
.detail-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:36px; }
.detail-button { display:inline-flex; align-items:center; gap:30px; min-height:54px; padding:0 22px; background:var(--detail-blue); color:white; text-decoration:none; font-size:14px; font-weight:700; transition:background .2s; }
.detail-button:hover { background:#003fcf; }
.detail-text-link span { margin-left:7px; color:var(--detail-blue); }
.detail-hero-note { margin:67px 0 0; display:flex; align-items:center; gap:11px; color:#768293; font-size:12px; letter-spacing:.03em; }
.detail-hero-note i { width:3px; height:3px; background:#8c9ab0; border-radius:50%; }
.detail-hero-image { position:relative; overflow:hidden; min-height:480px; height:clamp(480px,43vw,680px); margin:0; background:#edf2fa; }
.detail-hero-image img { display:block; width:100%; height:100%; object-fit:cover; }
.detail-hero-image--driving img,.detail-hero-image--robotics img { object-fit:contain; }
.detail-hero-image--robotics { background:linear-gradient(135deg,#eff4fb,#e0eaf9); }
.detail-hero-image figcaption { position:absolute; right:18px; bottom:18px; padding:8px 11px; font-size:11px; color:#46546a; background:rgba(255,255,255,.9); }
.detail-section-head { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:52px; }
.detail-section-head h2,.detail-contact h2 { margin:0; font-size:clamp(34px,3.6vw,55px); line-height:1.18; font-weight:680; letter-spacing:-.05em; }
.detail-section-head>p { max-width:390px; margin:0 0 4px; font-size:15px; line-height:1.8; color:var(--detail-muted); }
.detail-overview { padding:120px 0; background:var(--detail-soft); }
.detail-features { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #cfd9e9; }
.detail-feature { position:relative; min-height:245px; padding:26px 24px 32px 0; border-right:1px solid #dbe3ef; }
.detail-feature:not(:first-child) { padding-left:24px; }
.detail-feature:last-child { border:0; }
.detail-feature-number { font-size:12px; color:#6280b0; }
.detail-feature h3 { margin:56px 0 13px; font-size:19px; letter-spacing:-.02em; }
.detail-feature p { margin:0; color:var(--detail-muted); font-size:14px; line-height:1.8; }
.detail-feature-arrow { position:absolute; right:24px; top:24px; color:#8da6d5; }
.detail-structure { padding-top:120px; padding-bottom:120px; }
.detail-explorer { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); min-height:680px; background:#f5f8fd; }
.detail-explorer-figure { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; padding:48px 32px 30px; min-width:0; }
.detail-structure-frame { position:relative; flex:none; width:min(100%,430px); }
.detail-structure-frame--driving { width:min(100%,620px); aspect-ratio:2188/1243; }
.detail-structure-frame--desktop { aspect-ratio:1330/1910; }
.detail-structure-frame--robotics { aspect-ratio:1390/2342; width:min(100%,350px); }
.detail-structure-frame img { display:block; width:100%; height:100%; }
.detail-explorer-figure figcaption { margin-top:24px; color:#8190a4; font-size:12px; }
.detail-hotspot { position:absolute; left:var(--hotspot-x); top:var(--hotspot-y); transform:translate(-50%,-50%); display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid #fff; border-radius:50%; color:#fff; background:#1555e6; box-shadow:0 3px 12px #0b43a944; font-family:inherit; font-size:12px; line-height:1; font-weight:700; cursor:pointer; transition:background .18s,box-shadow .18s,transform .18s; }
.detail-hotspot:hover,.detail-hotspot.is-active { background:#0b2458; box-shadow:0 0 0 5px #1957e329; transform:translate(-50%,-50%) scale(1.12); }
.detail-explorer-content { padding:55px 52px 42px; background:#fff; border:1px solid #e5ebf4; }
.detail-current { display:flex; align-items:center; gap:22px; min-height:82px; margin-bottom:22px; }
.detail-current>span { color:#aebfe2; font-size:42px; font-weight:300; letter-spacing:-.06em; }
.detail-current div { display:grid; gap:8px; }
.detail-current small { color:#8a98ae; font-size:10px; letter-spacing:.12em; }
.detail-current strong { font-size:20px; font-weight:650; }
.detail-component-list { padding:0; margin:0; list-style:none; border-top:1px solid #e2e9f3; }
.detail-component-list li { margin:0; border-bottom:1px solid #e2e9f3; }
.detail-component { width:100%; min-height:49px; padding:10px 4px; display:grid; grid-template-columns:40px 1fr 20px; gap:7px; align-items:center; text-align:left; border:0; background:transparent; color:#354257; font:inherit; font-size:13px; cursor:pointer; }
.detail-component-number { color:#9cabc3; font-size:11px; }
.detail-component-arrow { opacity:0; color:var(--detail-blue); text-align:right; }
.detail-component:hover,.detail-component.is-active { color:var(--detail-blue); }
.detail-component.is-active .detail-component-number { color:var(--detail-blue); }
.detail-component:hover .detail-component-arrow,.detail-component.is-active .detail-component-arrow { opacity:1; }
.detail-configuration { margin:24px 0 0; color:#7b889a; font-size:12px; line-height:1.8; }
.detail-scene-section { padding:120px 0; color:white; background:#101b31; }
.detail-scene-section .detail-eyebrow { color:#9cbcff; }
.detail-scene-section .detail-eyebrow span { background:#83adff; }
.detail-scene-section .detail-section-head>p { color:#a4b1c6; }
.detail-scenes { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); padding:0; margin:0; list-style:none; border-top:1px solid #425069; }
.detail-scenes li { min-height:115px; padding:23px 15px 20px 0; border-bottom:1px solid #425069; font-size:17px; display:flex; flex-direction:column; gap:23px; }
.detail-scenes li span { color:#8da3c7; font-size:11px; }
.detail-specifications { display:flex; gap:40px; margin-top:38px; color:#95a6c1; font-size:13px; }
.detail-specifications>span { color:#fff; white-space:nowrap; }
.detail-specifications ul { display:flex; flex-wrap:wrap; gap:12px 32px; padding:0; margin:0; list-style:none; }
.detail-gallery { padding-top:120px; padding-bottom:120px; }
.detail-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.detail-gallery-grid figure { margin:0; min-width:0; }
.detail-gallery-grid figure>div { aspect-ratio:4/3; background:#f1f5fb; overflow:hidden; }
.detail-gallery-grid img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.detail-gallery-grid--driving figure:first-child img,.detail-gallery-grid--robotics figure:first-child img { object-fit:contain; }
.detail-gallery-grid figure:hover img { transform:scale(1.035); }
.detail-gallery-grid figcaption { display:flex; align-items:start; gap:12px; margin-top:15px; color:#6a788b; font-size:12px; line-height:1.5; }
.detail-gallery-grid figcaption span:first-child { color:#1854cf; white-space:nowrap; }
.detail-contact { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:75px 0 100px; border-top:1px solid #dce5f0; }
.detail-contact p:last-child { color:#6a788b; margin:22px 0 0; }
.detail-contact-link { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:16px 0; min-width:200px; border-bottom:1px solid #1854cf; color:#124ed8; text-decoration:none; font-weight:700; }
@media(max-width:900px) {
 .detail-shell { width:calc(100% - 48px); }
 .detail-hero { grid-template-columns:1fr; min-height:0; gap:36px; padding-top:36px; padding-bottom:75px; }
 .detail-back { margin-bottom:55px; }
 .detail-hero-note { margin-top:32px; }
 .detail-hero-image { min-height:0; height:420px; }
 .detail-features { grid-template-columns:repeat(2,1fr); }
 .detail-feature { min-height:200px; border-bottom:1px solid #dbe3ef; }
 .detail-feature:nth-child(3) { padding-left:0; }
 .detail-feature:nth-child(2) { border-right:0; }
 .detail-feature h3 { margin-top:35px; }
 .detail-explorer { grid-template-columns:1fr; }
 .detail-explorer-figure { min-height:420px; }
 .detail-explorer-content { padding:38px 32px; }
 .detail-overview,.detail-scene-section { padding:85px 0; }
 .detail-structure,.detail-gallery { padding-top:85px; padding-bottom:85px; }
}
@media(max-width:600px) {
 .detail-shell { width:calc(100% - 36px); }
 .detail-hero { padding-top:25px; padding-bottom:65px; }
 .detail-back { margin-bottom:45px; }
 .detail-hero h1 { font-size:clamp(40px,11vw,56px); }
 .detail-intro { font-size:15px; }
 .detail-hero-actions { gap:18px; }
 .detail-hero-image { height:330px; }
 .detail-section-head { display:block; margin-bottom:32px; }
 .detail-section-head>p { margin-top:22px; font-size:14px; }
 .detail-feature { min-height:185px; padding-right:12px; }
 .detail-feature:not(:first-child) { padding-left:14px; }
 .detail-feature:nth-child(3) { padding-left:0; }
 .detail-feature h3 { margin-top:30px; font-size:16px; }
 .detail-feature p { font-size:13px; }
 .detail-feature-arrow { right:12px; }
 .detail-explorer-figure { padding:44px 20px 26px; min-height:360px; }
 .detail-structure-frame--desktop { width:min(100%,300px); }
 .detail-structure-frame--robotics { width:min(100%,270px); }
 .detail-hotspot { width:29px; height:29px; }
 .detail-explorer-content { padding:28px 22px; }
 .detail-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .detail-specifications { display:block; }
 .detail-specifications ul { display:grid; gap:10px; margin-top:14px; }
 .detail-gallery-grid { grid-template-columns:1fr; gap:30px; }
 .detail-contact { display:block; padding:55px 0 75px; }
 .detail-contact-link { margin-top:28px; }
}
@media(prefers-reduced-motion:reduce) { .detail-main *, .detail-main *::before, .detail-main *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }