:root { --vx-background: #111315; --vx-color-1: #f1f2f3; --vx-color-2: #c8cdd2; --vx-color-3: #7b8793; --vx-color-4: #111315; color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: #111315; color: #f1f2f3; font-family: 'TikTok Sans', sans-serif; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #d8e0e8; outline-offset: 6px; }
img { display: block; max-width: 100%; }
h1, h2, h3, .brand, .button, nav, .footer-mark, .step-number, .vxk-devices__facts b { font-family: 'TikTok Sans', sans-serif; font-weight: 500; font-stretch: 100%; letter-spacing: -.02em; line-height: 1.1; }
h1, h2, h3, p { margin-top: 0; }
h2 { font-size: clamp(36px, 4.2vw, 58px); margin-bottom: 24px; }
h3 { font-size: 27px; margin-bottom: 16px; }
p { color: #a8adb4; font-size: 18px; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.section-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: end; margin-bottom: 48px; }
.section-head p { max-width: 440px; }
.centered { display: block; text-align: center; }
.centered p { max-width: 620px; margin: 0 auto; }
.button { display: inline-flex; min-height: 56px; padding: 17px 25px; border-radius: 99px; background: linear-gradient(#f9fafb, #cfd3d8); color: #17191d; align-items: center; gap: 22px; font-size: 17px; border: 1px solid #f2f3f5; cursor: pointer; box-shadow: 0 6px 28px #0003; transition: box-shadow .2s, background .2s; }
.button:hover { background: #fff; box-shadow: 0 8px 30px #ffffff18; }
.button img { width: 20px; height: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid #ffffff45; font-size: 16px; }
.text-link img, .hero-bottom img, footer img { width: 18px; height: 18px; filter: invert(1); }
vx-scene { --vx-screens: 1.55; --vx-fit: cover; --vx-focus: 50% 50%; --vx-matte: #10151b; --vx-scrim: linear-gradient(90deg, #0b1015bc, transparent 58%); }
.opening-story { min-height: 100svh; background: none; }
.header { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; gap: 32px; }
.brand { font-size: 28px; font-weight: 600; }
.brand span { display: block; font-size: 12px; font-weight: 400; color: #aeb4bb; letter-spacing: 0; line-height: 1.45; margin-top: 5px; }
nav { display: flex; gap: 32px; font-size: 15px; font-weight: 400; }
nav a:hover { color: #bac7d2; }
.city { color: #b9c0c7; font-size: 14px; }
.menu-button { display: none; }
.hero-copy { padding-top: max(45px, calc(var(--vx-media-top) + var(--vx-media-height) * .16)); padding-bottom: 80px; }
.hero-intro { color: #c3c9d0; font-size: 18px; margin-bottom: 14px; }
h1 { font-size: clamp(80px, 7.2vw, 108px); font-weight: 500; margin: 0 0 26px -5px; }
.hero-subtitle { color: #c4cbd3; font-size: 24px; margin-bottom: 38px; }
.hero-bottom { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 13px; color: #aab1b9; }
.hero-bottom a { display: flex; gap: 12px; align-items: center; }
.next-section { background: #111315; border-top: 1px solid #ffffff15; }
.direction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.direction-card { position: relative; border: 1px solid #ffffff1b; background: #191c20; border-radius: 20px; overflow: hidden; min-height: 530px; }
.direction-copy { padding: 36px 36px 16px; position: relative; z-index: 1; }
.direction-copy h3 { font-size: 40px; }
.direction-copy p { max-width: 370px; font-size: 17px; }
.direction-photo { margin: 20px auto 0; object-fit: cover; }
.bmw-photo { width: min(100%, 540px); height: 310px; object-position: 50% 60%; }
.ural-photo { width: min(100%, 368px); height: 276px; border-radius: 12px 12px 0 0; filter: saturate(.3); }
.image-note { font-size: 13px; color: #8f969e; margin-top: 24px; }
.services { background: radial-gradient(ellipse at 14% 66%, #252c344f, transparent 60%); }
.statement { font-size: clamp(30px, 3.8vw, 51px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; max-width: 1050px; margin: 0 auto 100px; }
.service-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 100px; }
.detail-composition { position: relative; padding: 20px 40px 35px; border: 1px solid #ffffff18; border-radius: 18px; background: #15181c; }
.detail-composition > img { width: 319px; height: 440px; object-fit: cover; margin-inline: auto; border-radius: 9px; filter: saturate(.4); }
.detail-label { background: #242a30; border: 1px solid #ffffff28; border-radius: 12px; padding: 18px 24px; position: absolute; right: -28px; bottom: 16px; box-shadow: 0 20px 50px #0005; }
.detail-label span { display: block; color: #aeb8c3; font-size: 13px; }
.detail-label strong { font-weight: 400; font-size: 20px; }
.service-copy article + article { border-top: 1px solid #ffffff1b; margin-top: 36px; padding-top: 36px; }
.service-copy h2 { font-size: 38px; }
.service-copy p { margin-bottom: 0; }
.vxk-flow { background: #0c0e10; border-block: 1px solid #ffffff15; }
.vxk-flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0 0 24px; gap: 16px; }
.vxk-flow__step { padding: 26px; border-radius: 17px; border: 1px solid #ffffff18; background: #1b1e22; display: flex; flex-direction: column; min-height: 285px; }
.step-number { font-size: 48px; font-weight: 300; color: #8a949e; margin-bottom: 32px; }
.vxk-flow__step h3 { font-size: 23px; }
.vxk-flow__step p { font-size: 15px; }
.step-result { margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff20; font-size: 12px; color: #a5adb5; }
.is-now { background: linear-gradient(145deg, #d0d5da, #8b959f); color: #11151a; }
.is-now p, .is-now .step-number, .is-now .step-result { color: #29323b; }
.is-now .step-result { border-color: #0003; }
.vxk-flow__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 24px; }
.scope-panel, .agreement-panel { border: 1px solid #ffffff1c; border-radius: 18px; padding: 32px; }
.scope-panel { background: radial-gradient(ellipse at 60% 50%, #46536055, #181d23 75%); }
.scope-panel h3 { font-size: 22px; }
.system-flow { display: grid; position: relative; grid-template-columns: 1fr 1fr; gap: 24px; margin-block: 30px; }
.system-flow::before { content: ''; position: absolute; left: 25%; right: 25%; top: 25%; bottom: 25%; border: 1px solid #93a6b8; }
.system-flow span { position: relative; z-index: 1; padding: 19px 16px; text-align: center; background: #10151b; border: 1px solid #ffffff30; border-radius: 8px; }
.system-flow img { position: relative; grid-column: span 2; width: 100%; height: 200px; object-fit: cover; border-radius: 10px; }
.system-flow span:nth-child(2), .system-flow span:nth-child(4) { background: #2b3540; }
.scope-panel p, .agreement-panel p { font-size: 16px; margin-bottom: 0; }
.agreement-panel { display: flex; flex-direction: column; background: #181b1f; }
.agreement-panel .text-link { align-self: start; margin-top: auto; padding-top: 24px; }
.vxk-devices { overflow: hidden; }
.vxk-devices__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
.vxk-devices__copy h2 { font-size: 48px; }
.vxk-devices__facts { margin-top: 32px; }
.vxk-devices__facts > div { display: flex; justify-content: space-between; border-top: 1px solid #ffffff20; padding-block: 16px; color: #a4abb2; }
.vxk-devices__facts b { color: #d9dde2; font-size: 24px; font-weight: 400; }
.vxk-devices__stage { position: relative; padding-bottom: 85px; }
figure { margin: 0; }
.tech-main { border: 1px solid #ffffff27; padding: 12px; border-radius: 18px; background: #1c2025; }
.tech-main img { width: 100%; height: auto; max-width: 540px; border-radius: 9px; }
.tech-main figcaption { padding: 18px 8px; font-size: 14px; color: #b3bbc4; }
.tech-detail { width: 190px; position: absolute; bottom: 0; right: -30px; padding: 8px; border-radius: 14px; background: #242b32; border: 1px solid #ffffff32; box-shadow: 0 15px 50px #0008; }
.tech-detail img { border-radius: 8px; width: 100%; height: auto; }
.faq { background: #0e1012; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.faq-list { border-top: 1px solid #ffffff25; }
details { border-bottom: 1px solid #ffffff25; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; padding: 25px 0; cursor: pointer; font-size: 19px; }
summary::-webkit-details-marker { display: none; }
summary img { width: 22px; height: 22px; filter: invert(1); flex-shrink: 0; transition: transform .2s; }
details[open] summary img { transform: rotate(45deg); }
details p { font-size: 16px; padding-right: 40px; margin-bottom: 28px; }
.booking { border-top: 1px solid #ffffff1a; background: #191e24; }
.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; position: relative; }
.booking-copy h2 { font-size: 51px; }
.contact-block { display: grid; gap: 8px; margin-top: 80px; font-size: 15px; color: #c0c6ce; }
.contact-block strong { font-size: 24px; font-weight: 500; color: #f1f2f3; }
form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form label { font-size: 15px; }
input:not([type=radio]):not([type=checkbox]), textarea { display: block; width: 100%; border: 1px solid #ffffff2d; background: #10141bb3; border-radius: 9px; min-height: 50px; padding: 14px; color: #fff; margin-top: 9px; outline: none; font-size: 16px; }
input:focus, textarea:focus { border-color: #c1cbd6 !important; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #8e99a5; font-size: 14px; }
fieldset { margin: 0; border: 0; padding: 0; }
legend { margin-bottom: 10px; font-size: 15px; }
.brand-choices { display: flex; gap: 10px; }
.brand-choices label { flex: 1; position: relative; cursor: pointer; }
.brand-choices input { position: absolute; opacity: 0; }
.brand-choices span { display: block; border: 1px solid #ffffff35; border-radius: 8px; padding: 12px; text-align: center; background: #1319208c; }
.brand-choices input:checked + span { background: #d0d7de; color: #161e26; border-color: #e2e7ec; }
.brand-choices input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.optional { color: #9da5ae; }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { width: 19px; height: 19px; margin: 2px 0 0; flex-shrink: 0; accent-color: #cdd6df; }
.consent span { font-size: 13px; color: #bec5ce; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-link { font-size: 12px; color: #a2abb6; margin-top: -12px; margin-left: 31px; }
form .button { justify-self: start; }
.button:disabled { opacity: .6; cursor: wait; }
.form-status { font-size: 15px; margin: 0; }
.honey { position: absolute !important; left: -10000px; opacity: 0; }
footer { background: #0b0d10; height: 60svh; min-height: 360px; padding: 40px 0; display: flex; flex-direction: column; justify-content: space-between; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; color: #a5aeb8; font-size: 13px; }
.footer-top a { display: flex; align-items: center; gap: 10px; }
.footer-mark { font-size: clamp(80px, 14vw, 200px); font-weight: 500; }
.legal { max-width: 850px; padding-block: 70px 100px; }
.legal h1 { font-size: 48px; margin: 30px 0; }
.legal h2 { font-size: 25px; margin-top: 30px; }
.legal p, .legal li { font-size: 17px; color: #bcc3cb; }
.legal a { text-decoration: underline; }
@media (max-width: 1000px) {
.wrap { width: calc(100% - 56px); }
.service-layout { gap: 60px; }
.vxk-flow__steps { grid-template-columns: 1fr 1fr; }
.vxk-devices__inner, .booking-layout { gap: 40px; }
.vxk-devices__copy h2, .booking-copy h2 { font-size: 40px; }
}
@media (max-width: 700px) {
.wrap { width: calc(100% - 40px); }
.section { padding: 72px 0; }
vx-scene { --vx-screens: 1.35; --vx-fit: cover; --vx-focus: 69% 40%; --vx-matte: #10151b; --vx-scrim: linear-gradient(180deg, #0b1015a6 0%, #0b101573 38%, #0b101599 60%, #0b1015ee 88%); }
.opening-story { min-height: 100svh; background: none; }
.header { padding-block: 22px; gap: 16px; }
.brand { font-size: 24px; }
.city { margin-left: auto; font-size: 12px; }
.menu-button { display: flex; padding: 8px; border: 1px solid #ffffff3b; background: #131b23; border-radius: 8px; }
.menu-button img { filter: invert(1); width: 22px; height: 22px; }
nav { display: none; position: absolute; z-index: 5; top: 85px; left: 0; width: 100%; background: #151b23; box-shadow: 0 15px 40px #0008; padding: 28px; border-block: 1px solid #ffffff2a; }
nav.open { display: flex; flex-direction: column; gap: 25px; }
.hero-copy { padding-top: 0; position: absolute; top: calc(var(--vx-media-top) + var(--vx-media-height) * .52); left: 0; right: 0; padding-bottom: 40px; }
.hero-intro { font-size: 14px; margin-bottom: 8px; }
h1 { font-size: 65px; margin: 0 0 12px -2px; }
.hero-subtitle { font-size: 18px; margin-bottom: 22px; }
.button { font-size: 15px; min-height: 52px; padding: 15px 21px; }
.hero-bottom { bottom: 15px; font-size: 11px; }
.hero-bottom > span { display: none; }
.hero-bottom a { margin-left: auto; }
.section-head { display: block; margin-bottom: 32px; }
.section-head p { font-size: 16px; }
h2 { font-size: 36px; }
.direction-grid { grid-template-columns: 1fr; }
.direction-card { min-height: 480px; }
.direction-copy { padding: 28px 26px 12px; }
.direction-copy h3 { font-size: 34px; }
.bmw-photo { height: 290px; }
.ural-photo { width: min(100%, 368px); height: auto; }
.statement { margin-bottom: 60px; font-size: 31px; }
.service-layout, .vxk-flow__grid, .vxk-devices__inner, .faq-layout, .booking-layout { grid-template-columns: 1fr; gap: 40px; }
.detail-composition { max-width: 380px; margin-right: 18px; padding: 14px; }
.detail-composition > img { height: 370px; }
.detail-label { right: -18px; }
.service-copy h2 { font-size: 32px; }
p { font-size: 16px; }
.vxk-flow__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vxk-flow__step { padding: 24px; min-height: 220px; }
.vxk-flow__step h3 { font-size: 20px; }
.vxk-flow__step p { font-size: 14px; }
.step-number { font-size: 39px; margin-bottom: 24px; }
.step-result { font-size: 11px; }
.scope-panel, .agreement-panel { padding: 24px; }
.vxk-devices__copy h2, .booking-copy h2 { font-size: 37px; }
.vxk-devices__stage { margin-right: 20px; padding-bottom: 60px; }
.tech-detail { width: 135px; right: -20px; }
.faq-layout { gap: 22px; }
summary { font-size: 17px; }
.booking-layout { gap: 36px; }
.contact-block { margin-top: 28px; }
.form-row { grid-template-columns: 1fr; }
footer { height: 48svh; min-height: 320px; }
.footer-mark { font-size: 20vw; }
.footer-bottom { flex-direction: column; gap: 12px; }
.legal h1 { font-size: 36px; }
}
@media (max-height: 700px) and (max-width: 700px) {
.hero-copy { top: 46%; }
h1 { font-size: 55px; }
.hero-subtitle { font-size: 16px; margin-bottom: 15px; }
.hero-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}