:root { --model-accent: var(--lime); }
body.model-body { background: #070908; color: #f4f7f4; }
.model-page { padding-top: 84px; overflow: hidden; }
.model-hero { position: relative; min-height: min(880px, calc(100svh - 84px)); display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 40%, rgba(95,246,255,.1), transparent 32%), #080b09; }
.model-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 72%); }
.model-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 8vw, 132px) clamp(28px, 5.5vw, 96px); }
.model-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(40px, 6vw, 82px); color: #69716b; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.model-breadcrumb a:hover { color: var(--model-accent); }
.model-breadcrumb span { color: #414742; }
.model-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 19px; color: var(--model-accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.model-kicker::before { content: ""; width: 34px; height: 1px; background: var(--model-accent); box-shadow: 0 0 12px var(--model-accent); }
.model-hero h1 { margin: 0; font-size: clamp(60px, 7.4vw, 126px); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.model-hero h1 span { display: block; margin-bottom: 14px; color: #9ba29d; font-size: .26em; letter-spacing: .2em; }
.model-hero h1 em { display: block; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.8); font-style: normal; }
.model-hero-lead { max-width: 610px; margin: 34px 0 0; color: #aab2ac; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; }
.model-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 35px; }
.model-phone { padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.34); color: #e9eee9; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.model-phone span { margin-left: 12px; color: var(--model-accent); }
.model-availability { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: #777f79; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.model-availability i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--model-accent); box-shadow: 0 0 16px var(--model-accent); animation: pulse 2s infinite; }
.model-hero-media { position: relative; min-height: 580px; overflow: hidden; border-left: 1px solid var(--line); }
.model-hero-media::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7,9,8,.68), transparent 32%), linear-gradient(0deg, rgba(7,9,8,.72), transparent 42%); pointer-events: none; }
.model-hero-media::after { content: "100% ELECTRIC"; position: absolute; z-index: 2; right: -10px; bottom: 18px; color: rgba(255,255,255,.11); font-size: clamp(68px, 8.7vw, 156px); font-weight: 900; letter-spacing: -.07em; line-height: .8; white-space: nowrap; transform: translateX(5%); }
.model-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.model-yu7 .model-hero-media img { object-position: 57% center; }
.model-x9 .model-hero-media img { object-position: 58% center; }
.model-data-rail { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 25px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.18); background: rgba(7,10,8,.8); backdrop-filter: blur(14px); }
.model-data-rail div { padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.14); }
.model-data-rail div:last-child { border-right: 0; }
.model-data-rail small { display: block; margin-bottom: 7px; color: #747d76; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.model-data-rail strong { font-size: clamp(13px, 1.2vw, 18px); }
.model-shell { width: min(1480px, calc(100% - 44px)); margin: 0 auto; }
.model-section { padding: clamp(86px, 10vw, 150px) 0; border-bottom: 1px solid var(--line); }
.model-section-heading { display: grid; grid-template-columns: minmax(0, .75fr) minmax(280px, .4fr); align-items: end; gap: 8vw; margin-bottom: clamp(55px, 7vw, 100px); }
.model-label { margin: 0 0 18px; color: var(--model-accent); font-family: var(--font-geist-mono); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.model-section h2 { margin: 0; font-size: clamp(49px, 6.2vw, 102px); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.model-section h2 em { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); font-style: normal; }
.model-section-heading > p { margin: 0; color: #929b94; font-size: 15px; line-height: 1.8; }
.model-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.model-story article { min-height: 310px; padding: clamp(30px, 4vw, 62px); background: #0b0f0c; }
.model-story article:first-child { background: linear-gradient(145deg, rgba(199,255,60,.065), transparent 55%), #0b0f0c; }
.model-story span { color: #59615a; font-family: var(--font-geist-mono); font-size: 9px; letter-spacing: .14em; }
.model-story h3 { max-width: 620px; margin: 36px 0 22px; font-size: clamp(27px, 3vw, 46px); letter-spacing: -.04em; }
.model-story p { max-width: 680px; margin: 0; color: #929a94; font-size: 14px; line-height: 1.85; }
.model-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.model-feature-grid article { min-height: 240px; padding: 31px; background: #0c110d; }
.model-feature-grid span { color: var(--model-accent); font-family: var(--font-geist-mono); font-size: 9px; }
.model-feature-grid h3 { margin: 55px 0 15px; font-size: 19px; letter-spacing: -.02em; }
.model-feature-grid p { margin: 0; color: #858e87; font-size: 12px; line-height: 1.7; }
.model-gallery { display: grid; grid-template-columns: 1.18fr .82fr; grid-template-rows: repeat(2, minmax(280px, 36vw)); gap: 2px; }
.model-gallery figure { position: relative; margin: 0; overflow: hidden; background: #0d110e; }
.model-gallery figure:first-child { grid-row: 1 / 3; }
.model-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.model-gallery figure:hover img { transform: scale(1.025); }
.model-gallery figcaption { position: absolute; left: 18px; bottom: 17px; padding: 8px 10px; background: rgba(7,9,8,.75); color: #d9dfda; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); }
.model-extra-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
.model-extra-gallery figure { position: relative; min-height: 260px; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #0d110e; }
.model-extra-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.model-extra-gallery figure:hover img { transform: scale(1.025); }
.model-spec-layout { display: grid; grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr); gap: clamp(45px, 8vw, 120px); }
.model-spec-intro { position: sticky; top: 120px; align-self: start; }
.model-spec-intro p:last-child { color: #818a83; font-size: 13px; line-height: 1.75; }
.model-spec-list { margin: 0; border-top: 1px solid var(--line); }
.model-spec-list div { display: grid; grid-template-columns: minmax(150px, .65fr) 1fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.model-spec-list dt { color: #707971; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.model-spec-list dd { margin: 0; color: #e8ede9; font-size: 14px; font-weight: 700; text-align: right; }
.model-note { margin-top: 33px; padding: 22px; border: 1px solid rgba(199,255,60,.2); color: #7d867f; font-size: 11px; line-height: 1.7; background: rgba(199,255,60,.035); }
.model-contact { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 60px; padding: clamp(70px, 8vw, 125px); overflow: hidden; background: radial-gradient(circle at 75% 45%, rgba(199,255,60,.1), transparent 30%), #0b100c; }
.model-contact::before { content: "EV"; position: absolute; right: -2vw; bottom: -5vw; color: rgba(255,255,255,.025); font-size: clamp(220px, 34vw, 580px); font-weight: 900; line-height: .7; }
.model-contact > * { position: relative; z-index: 1; }
.model-contact h2 { margin: 0; font-size: clamp(48px, 6.8vw, 108px); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.model-contact h2 em { display: block; color: var(--model-accent); font-style: normal; }
.model-contact p { max-width: 680px; margin: 27px 0 0; color: #929a94; font-size: 15px; line-height: 1.75; }
.model-contact-actions { display: grid; gap: 13px; min-width: 250px; }
.model-contact-actions a { width: 100%; }
.model-secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border: 1px solid rgba(255,255,255,.3); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.model-secondary-button:hover { color: var(--model-accent); border-color: var(--model-accent); }
.model-related { padding: 70px 0 90px; }
.model-related > p { margin-bottom: 22px; color: #6d756f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.model-related-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.model-related-links a { display: flex; justify-content: space-between; gap: 20px; padding: 25px; background: #0b0f0c; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.model-related-links a span { color: var(--model-accent); }
.model-body footer { padding-bottom: 46px; }
.model-body .cookie-notice { z-index: 70; }
@media (max-width: 1100px) {
  .model-hero { grid-template-columns: 1fr; }
  .model-hero-copy { min-height: 720px; }
  .model-hero-media { min-height: 68vw; border-left: 0; border-top: 1px solid var(--line); }
  .model-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .model-contact { grid-template-columns: 1fr; align-items: start; }
  .model-contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
}
@media (max-width: 900px) {
  .model-page { padding-top: 68px; }
  .model-section-heading, .model-spec-layout { grid-template-columns: 1fr; gap: 35px; }
  .model-spec-intro { position: static; }
  .model-story { grid-template-columns: 1fr; }
  .model-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(3, 70vw); }
  .model-gallery figure:first-child { grid-row: auto; }
  .model-extra-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .model-hero-copy { min-height: 690px; padding: 70px 22px; }
  .model-breadcrumb { margin-bottom: 55px; }
  .model-hero-media { min-height: 92vw; }
  .model-data-rail { left: 12px; right: 12px; bottom: 12px; }
  .model-data-rail div { padding: 12px 9px; }
  .model-data-rail small { font-size: 7px; }
  .model-shell { width: min(100% - 30px, 1480px); }
  .model-feature-grid { grid-template-columns: 1fr; }
  .model-feature-grid article { min-height: 190px; }
  .model-feature-grid h3 { margin-top: 35px; }
  .model-spec-list div { grid-template-columns: 1fr; gap: 8px; }
  .model-spec-list dd { text-align: left; }
  .model-contact { padding: 75px 22px; }
  .model-contact-actions { grid-template-columns: 1fr; }
  .model-related-links { grid-template-columns: 1fr; }
  .model-extra-gallery { grid-template-columns: 1fr; }
  .model-extra-gallery figure { min-height: 70vw; }
}
@media (prefers-reduced-motion: reduce) { .model-gallery img { transition: none; } }
