:root { --black:#030303; --section:#0b0b0d; --surface:#141416; --border:#2a2a2e; --white:#f7f7f7; --text:#eeeeef; --muted:#989ba8; --dim:#747784; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--black); } body { margin:0; overflow-x:hidden; background:var(--black); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin:0; } .container { width:min(1260px,calc(100% - 80px)); margin-inline:auto; } .section { padding:130px 0; background:var(--black); } .section:nth-of-type(even) { background:var(--section); } .surface-card { border:1px solid #212124; border-radius:16px; background:linear-gradient(135deg,#18181b,#101012); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:61px; padding:0 27px; border:1px solid transparent; border-radius:13px; font-size:16px; font-weight:700; letter-spacing:.01em; transition:transform .18s ease,background .18s ease,border-color .18s ease; } .button:hover { transform:translateY(-2px); } .button-white { color:#111; border-color:var(--white); background:var(--white); } .button-white:hover { color:var(--white); background:transparent; } .button-outline { color:var(--text); border-color:#3a3a3f; background:transparent; } .button-outline:hover { color:#111; border-color:var(--white); background:var(--white); } .icon-box { display:grid; flex:none; width:54px; height:54px; place-items:center; color:var(--text); border-radius:13px; background:#222225; font-size:23px; }
.header { position:fixed; z-index:50; top:0; width:100%; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(3,3,3,.9); backdrop-filter:blur(16px); } .header-inner { display:flex; align-items:center; gap:35px; height:86px; } .brand { display:inline-flex; align-items:center; gap:10px; flex:none; } .brand>b { display:grid; width:44px; height:44px; place-items:center; color:#0a0a0b; border-radius:8px; background:#f7f7f7; font-size:19px; letter-spacing:-.08em; } .brand span { display:grid; gap:3px; } .brand strong { font-size:16px; letter-spacing:.065em; } .brand small { color:var(--dim); font-size:11px; letter-spacing:.13em; } .nav { display:flex; gap:36px; margin-left:auto; color:#c7c7ca; font-size:15px; } .nav a:hover { color:var(--white); } .header-right { display:flex; align-items:center; gap:22px; } .header-phone { font-size:16px; font-weight:600; white-space:nowrap; } .header-cta { min-height:48px; padding:0 22px; font-size:15px; } .menu-toggle,.mobile-nav { display:none; }
.hero { position:relative; min-height:930px; padding-top:86px; border-bottom:1px solid var(--border); background:#000; } .hero-inner { min-height:844px; display:flex; align-items:center; } .hero-copy { max-width:780px; padding:46px 0 70px; } .hero-badge { display:inline-flex; align-items:center; gap:9px; padding:9px 18px; color:#d4d4d7; border:1px solid #404045; border-radius:999px; font-size:16px; letter-spacing:.04em; } .hero-badge i { width:9px; height:9px; border-radius:50%; background:#d5d5d8; } .hero h1 { margin-top:35px; color:#f6f6f7; font-size:clamp(54px,5.25vw,78px); font-weight:750; letter-spacing:-.065em; line-height:.92; } .hero-copy>p { max-width:710px; margin-top:29px; color:#c4c5cb; font-size:18px; line-height:1.62; } .hero-profit { display:flex; align-items:baseline; gap:12px; margin-top:37px; } .hero-profit strong { font-size:71px; font-weight:750; letter-spacing:-.07em; line-height:.85; } .hero-profit span { color:var(--muted); font-size:18px; } .hero-tags { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; } .hero-tags span { padding:9px 18px; color:#d1d2d8; border:1px solid #38383e; border-radius:8px; font-size:15px; } .hero-actions { display:flex; gap:17px; margin-top:42px; } .scroll-mark { position:absolute; bottom:28px; left:50%; width:25px; height:43px; border:2px solid #747474; border-radius:99px; transform:translateX(-50%); } .scroll-mark:before { position:absolute; top:7px; left:50%; width:4px; height:8px; border-radius:99px; background:#747474; content:""; transform:translateX(-50%); }
.centered-title { text-align:center; } .centered-title h2 { color:var(--white); font-size:clamp(36px,3.55vw,54px); font-weight:750; letter-spacing:-.055em; line-height:1.05; } .centered-title p { margin:15px auto 0; color:var(--muted); font-size:17px; line-height:1.5; letter-spacing:.02em; }
.benefits { padding-bottom:150px; } .benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:75px; } .benefit-card { min-height:252px; padding:37px; } .benefit-card h3 { margin-top:28px; color:#f3f3f4; font-size:20px; font-weight:750; } .benefit-card p { max-width:320px; margin-top:16px; color:var(--muted); font-size:17px; line-height:1.55; } .benefit-card:nth-child(4) { grid-column:1/2; } .benefit-card:nth-child(5) { grid-column:2/3; }
.cars { overflow:hidden; } .carousel-top { display:flex; justify-content:space-between; margin-top:54px; } .carousel-controls { display:flex; gap:16px; } .carousel-controls button { display:grid; width:55px; height:55px; place-items:center; color:var(--text); border:1px solid #343439; border-radius:50%; background:transparent; font-size:32px; line-height:1; } .carousel-controls button:hover { color:#0a0a0b; border-color:var(--white); background:var(--white); } .cars-track { display:grid; grid-auto-columns:minmax(270px,298px); grid-auto-flow:column; gap:29px; width:min(1500px,calc(100% - 80px)); margin:27px auto 0; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; } .cars-track::-webkit-scrollbar { display:none; } .model-card { overflow:hidden; border:1px solid #2b2b30; border-radius:17px; background:#1c1c1f; scroll-snap-align:start; } .model-visual { position:relative; display:grid; height:221px; place-items:center; overflow:hidden; border-bottom:1px solid #44444a; background:radial-gradient(ellipse at 50% 76%,rgba(130,130,137,.16),transparent 44%),linear-gradient(180deg,#242427 0%,#101011 100%); } .model-visual:after { position:absolute; bottom:22px; left:14%; width:72%; height:16px; border-radius:50%; background:rgba(0,0,0,.46); filter:blur(8px); content:""; } .model-visual img { position:relative; z-index:1; width:95%; height:92%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 15px 11px rgba(0,0,0,.42)); } .model-info { padding:23px 22px 24px; } .model-info h3 { font-size:19px; font-weight:750; } .model-info dl { display:grid; gap:8px; margin:14px 0 17px; } .model-info dl div { display:flex; justify-content:space-between; gap:8px; font-size:15px; } .model-info dt { color:#858896; } .model-info dd { margin:0; color:#d3d4d8; text-align:right; } .model-price { padding:15px 0 12px; color:#858896; border-top:1px solid #313136; font-size:15px; } .cost-button { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; color:#f0f0f1; border:1px solid #45454a; border-radius:8px; background:#262629; font-size:14px; font-weight:700; } .cost-button:hover { color:#111; background:#f6f6f7; }
.discovery { padding:155px 0; } .discovery-card,.application-card { max-width:1080px; margin:0 auto; padding:64px 30px; border:1px solid #323237; border-radius:22px; background:radial-gradient(ellipse at 50% 42%,rgba(67,67,75,.35),transparent 55%),linear-gradient(135deg,#19191c,#0b0b0c); text-align:center; } .discovery-card .icon-box { margin:0 auto 29px; } .discovery-card h2 { color:#f7f7f8; font-size:39px; letter-spacing:-.045em; } .discovery-card p,.application-card p { margin-top:20px; color:var(--muted); font-size:17px; line-height:1.65; } .discovery-card .button { margin-top:33px; }
.compare { padding-top:150px; } .compare-row { display:grid; grid-template-columns:330px 1fr 330px; gap:55px; align-items:center; justify-content:center; max-width:1010px; margin-top:80px; } .compare-card { display:grid; min-height:240px; padding:38px; text-align:center; } .compare-card span { color:#838694; font-size:15px; letter-spacing:.1em; } .compare-card strong { align-self:center; color:#efeff0; font-size:28px; line-height:1.3; } .compare-card i { height:8px; border-radius:9px; background:#505058; } .compare-arrow { justify-self:center; color:#71809a; font-size:31px; font-weight:400; } .saving-card { display:grid; gap:11px; width:325px; margin:54px auto 0; padding:32px; border:1px solid #4a4a50; border-radius:18px; background:#151518; text-align:center; } .saving-card span { color:#d7d7da; font-size:14px; letter-spacing:.11em; } .saving-card strong { font-size:57px; letter-spacing:-.06em; line-height:1; } .compare-note { margin-top:29px; color:#737784; font-size:15px; line-height:1.45; text-align:center; }
.process { padding-top:160px; } .process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:0; margin-top:72px; list-style:none; } .process-grid li { position:relative; min-height:238px; padding:28px; } .step-number { display:flex; align-items:center; gap:15px; } .step-number strong { color:#313136; font-size:31px; letter-spacing:-.05em; } .step-number i { flex:1; height:1px; background:#313136; } .process-grid h3 { margin-top:29px; color:#f2f2f3; font-size:18px; font-weight:750; line-height:1.45; } .process-grid p { margin-top:12px; color:var(--muted); font-size:16px; line-height:1.58; } .step-arrow { position:absolute; top:50%; right:-13px; z-index:2; display:grid; width:28px; height:28px; place-items:center; color:#a6a8b1; border:1px solid #48484e; border-radius:50%; background:#28282c; transform:translateY(-50%); }
.delivery { padding:143px 0; } .delivery .icon-box { margin:0 auto 29px; } .delivery-cards { display:grid; grid-template-columns:repeat(2,minmax(250px,420px)); justify-content:center; gap:32px; margin-top:60px; } .delivery-cards article { display:grid; min-height:155px; place-content:center; gap:16px; text-align:center; } .delivery-cards span { color:#878a99; font-size:16px; letter-spacing:.11em; } .delivery-cards strong { font-size:37px; letter-spacing:-.05em; } .delivery-note { margin-top:35px; color:#7c808e; font-size:15px; line-height:1.5; text-align:center; }
.control { padding:156px 0; } .control-grid { display:grid; grid-template-columns:.98fr 1fr; gap:90px; align-items:center; } .control h2 { color:var(--white); font-size:clamp(38px,3.6vw,53px); letter-spacing:-.055em; line-height:.98; } .control>div>div>p { max-width:620px; margin-top:29px; color:var(--muted); font-size:18px; line-height:1.6; } .control-list { display:grid; gap:19px; margin-top:36px; } .control-list article { display:flex; align-items:center; gap:17px; min-height:102px; padding:21px 24px; } .control-list h3 { color:#f0f0f1; font-size:17px; font-weight:750; } .control-list p { margin-top:6px; color:var(--muted); font-size:15px; line-height:1.4; } .control-stage { display:grid; min-height:475px; place-items:start; padding:14px; color:#bfc0c4; border:1px solid #4a4a4e; border-radius:15px; background:radial-gradient(ellipse at center,rgba(55,55,62,.18),transparent 60%),#070708; font-size:14px; }
.owners { padding-top:130px; } .owners-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:19px; margin-top:62px; } .owner-photo { position:relative; display:grid; min-height:270px; place-items:center; overflow:hidden; color:#34343a; border:1px solid #424249; border-radius:9px; background:#050506; font-size:33px; } .owner-photo:hover { color:#85858b; border-color:#8b8b93; } .owner-photo span { position:absolute; top:9px; left:10px; color:#ebebed; font-size:14px; }
.trust { padding:170px 0; } .trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:1080px; margin:70px auto 0; } .trust-grid article { display:grid; min-height:250px; justify-items:center; align-content:center; text-align:center; } .trust-grid .icon-box { margin-bottom:24px; } .trust-grid strong { color:#f5f5f6; font-size:28px; font-weight:750; line-height:1.28; } .trust-grid p { margin-top:10px; color:#7f8391; font-size:16px; }
.faq { padding:145px 0; } .faq-list { max-width:860px; margin-top:60px; } .faq-list details { overflow:hidden; margin-top:14px; border:1px solid #28282e; border-radius:16px; background:#101012; } .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 28px; list-style:none; color:#ececee; font-size:17px; font-weight:700; cursor:pointer; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary i { display:grid; width:37px; height:37px; flex:none; place-items:center; color:#b8bac3; border-radius:9px; background:#1b1b1e; font-style:normal; font-weight:400; } .faq-list summary i:before { content:"+"; font-size:22px; } .faq-list details[open] summary i:before { content:"−"; } .faq-list details p { padding:0 28px 24px; color:#a1a4b0; font-size:17px; line-height:1.65; }
.application { padding:145px 0; } .application-card { max-width:795px; padding:70px 35px; } .application-card h2 { color:var(--white); font-size:38px; letter-spacing:-.05em; line-height:1.18; } .application-card .button { margin-top:37px; } .final-cta { padding:145px 0 170px; } .final-cta .button { margin-top:42px; }
.contacts { padding:140px 0 150px; } .contacts-grid { display:grid; grid-template-columns:.98fr 1fr; gap:72px; margin-top:66px; } .contact-stack { display:grid; gap:28px; } .contact-stack article { display:flex; align-items:flex-start; gap:20px; min-height:140px; padding:24px; } .contact-stack article div { display:grid; gap:9px; } .contact-stack small,.footer small { color:#838694; font-size:15px; letter-spacing:.08em; } .contact-stack strong { color:#f0f0f2; font-size:17px; font-weight:650; } .contact-stack a { width:fit-content; color:#aeb0bb; border-bottom:1px solid #aeb0bb; font-size:16px; } .contact-stack a:hover { color:#fff; border-color:#fff; } .contact-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:18px; } .contact-actions .button { min-height:58px; padding:0 22px; } .map-placeholder { display:grid; min-height:490px; align-content:center; justify-items:center; gap:15px; color:#3e3f44; border:1px solid #313136; border-radius:18px; background:radial-gradient(circle,rgba(62,63,68,.11),transparent 48%),#080809; } .map-placeholder b { font-size:36px; font-weight:400; } .map-placeholder span { color:#777984; font-size:14px; }
.footer { padding:78px 0 30px; border-top:1px solid #2a2a2d; background:#000; } .footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:90px; } .footer .brand { margin-bottom:21px; } .footer-grid>div>p { color:#737783; font-size:16px; } .footer-grid>div:first-child .button { min-height:49px; margin-top:27px; font-size:15px; } .footer-grid>div:not(:first-child) { display:grid; align-content:start; gap:13px; } .footer-grid a,.footer-grid span { color:#d4d5db; font-size:16px; } .footer-grid a:hover { color:#fff; } .footer-bottom { display:flex; justify-content:space-between; margin-top:67px; padding-top:34px; border-top:1px solid #1d1d20; color:#68707e; font-size:16px; } .footer-bottom a:hover { color:#fff; } .privacy { display:none; }
.overlay { position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:24px; background:rgba(0,0,0,.82); backdrop-filter:blur(9px); } .overlay.visible { display:grid; } .quote-modal { position:relative; width:min(505px,100%); padding:38px; border:1px solid #3c3c42; border-radius:18px; background:#1b1b1e; box-shadow:0 30px 100px rgba(0,0,0,.5); } .close { position:absolute; top:23px; right:22px; display:grid; width:35px; height:35px; place-items:center; color:#8b8d99; border:0; background:transparent; font-size:29px; } .close:hover { color:#fff; } .quote-modal h2 { color:#f5f5f6; font-size:27px; letter-spacing:-.04em; } .quote-modal>div>p { max-width:390px; margin-top:14px; color:#a1a4b2; font-size:17px; line-height:1.38; } .quote-modal form { display:grid; gap:18px; margin-top:27px; } .quote-modal label { display:grid; gap:8px; color:#dedee2; font-size:16px; } .quote-modal input { width:100%; height:57px; padding:0 17px; color:#f4f4f5; outline:none; border:1px solid #38383e; border-radius:9px; background:#101012; font-size:16px; } .quote-modal input:focus { border-color:#85858d; } .quote-modal form small { color:#777b89; font-size:14px; line-height:1.35; text-align:center; } .sent-state { display:grid; justify-items:start; gap:18px; } .sent-state>b { color:#f5f5f6; font-size:37px; } .sent-state h2 { font-size:32px; }
@media (max-width:1120px) { .nav { gap:18px; } .header-phone { display:none; } .cars-track { grid-auto-columns:285px; } .control-grid { gap:50px; } .contacts-grid { gap:36px; } .footer-grid { gap:50px; } }
@media (max-width:780px) { .container { width:min(100% - 36px,560px); } .section { padding:84px 0; } .desktop-br { display:none; } .header-inner { height:70px; } .brand>b { width:39px; height:39px; font-size:17px; } .brand strong { font-size:14px; } .brand small { font-size:9px; } .nav,.header-cta { display:none; } .header-right { margin-left:auto; } .menu-toggle { display:grid; gap:6px; width:42px; height:42px; place-content:center; border:0; background:transparent; } .menu-toggle span { display:block; width:23px; height:1px; background:#f4f4f5; } .mobile-nav { display:none; gap:0; padding:0 0 17px; } .mobile-nav.open { display:grid; } .mobile-nav a { padding:11px 0; color:#d6d6da; border-top:1px solid #202024; font-size:15px; } .mobile-nav .button { width:100%; margin-top:12px; min-height:51px; }
  .hero { min-height:805px; padding-top:70px; } .hero-inner { min-height:735px; align-items:flex-start; } .hero-copy { padding-top:85px; } .hero-badge { padding:8px 13px; font-size:13px; } .hero h1 { margin-top:28px; font-size:clamp(43px,11.5vw,62px); line-height:.95; } .hero-copy>p { margin-top:23px; font-size:15px; } .hero-profit { margin-top:29px; } .hero-profit strong { font-size:59px; } .hero-profit span { font-size:16px; } .hero-tags { gap:8px; margin-top:25px; } .hero-tags span { padding:7px 10px; font-size:12px; } .hero-actions { display:grid; gap:12px; margin-top:27px; } .hero-actions .button { width:100%; min-height:55px; font-size:14px; } .scroll-mark { bottom:24px; }
  .centered-title h2 { font-size:clamp(32px,8.3vw,42px); line-height:1.1; } .centered-title p { margin-top:12px; font-size:15px; } .benefits { padding-bottom:90px; } .benefits-grid { grid-template-columns:1fr; gap:14px; margin-top:43px; } .benefit-card,.benefit-card:nth-child(4),.benefit-card:nth-child(5) { grid-column:auto; min-height:auto; padding:26px; } .benefit-card h3 { margin-top:22px; font-size:19px; } .benefit-card p { font-size:15px; }
  .carousel-top { margin-top:32px; } .carousel-controls button { width:46px; height:46px; } .cars-track { grid-auto-columns:minmax(258px,78vw); gap:12px; width:100%; padding:0 18px; } .model-visual { height:195px; } .model-info { padding:20px; } .model-info dl div { font-size:14px; } .discovery { padding:85px 0; } .discovery-card,.application-card { padding:44px 20px; border-radius:18px; } .discovery-card h2,.application-card h2 { font-size:31px; } .discovery-card p,.application-card p { font-size:15px; } .discovery-card .button { width:100%; min-height:54px; }
  .compare { padding-top:84px; } .compare-row { grid-template-columns:1fr; gap:19px; margin-top:46px; } .compare-card { min-height:178px; } .compare-card strong { font-size:24px; } .compare-arrow { transform:rotate(90deg); } .saving-card { width:min(100%,325px); margin-top:37px; } .saving-card strong { font-size:48px; } .compare-note { padding:0 10px; font-size:13px; }
  .process { padding-top:89px; } .process-grid { grid-template-columns:1fr; gap:14px; margin-top:44px; } .process-grid li { min-height:195px; } .step-arrow { right:20px; top:auto; bottom:-14px; transform:rotate(90deg); } .process-grid li:last-child .step-arrow { display:none; } .delivery { padding:85px 0; } .delivery-cards { grid-template-columns:1fr; gap:14px; margin-top:42px; } .delivery-cards article { min-height:140px; } .delivery-cards strong { font-size:33px; } .delivery-note { padding:0 10px; font-size:13px; }
  .control { padding:90px 0; } .control-grid { grid-template-columns:1fr; gap:32px; } .control h2 { font-size:38px; } .control>div>div>p { margin-top:19px; font-size:16px; } .control-list article { min-height:0; padding:18px; } .control-list p { font-size:14px; } .control-stage { min-height:280px; } .owners-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:40px; } .owner-photo { min-height:175px; } .owner-photo span { font-size:12px; }
  .trust { padding:92px 0; } .trust-grid { grid-template-columns:1fr 1fr; gap:13px; margin-top:43px; } .trust-grid article { min-height:200px; } .trust-grid strong { font-size:22px; } .trust-grid p { font-size:14px; } .faq { padding:90px 0; } .faq-list { margin-top:40px; } .faq-list summary { padding:20px; font-size:15px; } .faq-list details p { padding:0 20px 21px; font-size:15px; } .faq-list summary i { width:33px; height:33px; } .application { padding:90px 0; } .application-card .button { width:100%; margin-top:28px; min-height:54px; } .final-cta { padding:88px 0 105px; } .final-cta .button { width:100%; margin-top:29px; min-height:54px; }
  .contacts { padding:90px 0; } .contacts-grid { grid-template-columns:1fr; gap:30px; margin-top:43px; } .contact-stack { gap:13px; } .contact-stack article { min-height:118px; padding:19px; } .contact-stack strong { font-size:15px; } .contact-stack a { font-size:14px; } .contact-actions { display:grid; margin-top:5px; } .contact-actions .button { width:100%; min-height:53px; font-size:14px; } .map-placeholder { min-height:280px; } .footer { padding-top:50px; } .footer-grid { grid-template-columns:1fr; gap:40px; } .footer-grid>div:not(:first-child) { gap:10px; } .footer-bottom { margin-top:45px; padding-top:22px; font-size:13px; } .privacy { display:block; margin-top:15px; color:#6c707e; font-size:11px; line-height:1.4; }
  .overlay { padding:12px; } .quote-modal { padding:28px 22px; } .quote-modal h2 { font-size:26px; } .quote-modal>div>p { font-size:15px; } .quote-modal form { margin-top:22px; } .quote-modal form small { font-size:12px; } .close { top:13px; right:10px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Логотип подключён как исходный PNG без обработки. */
.brand-logo { display:block; width:82px; height:55px; object-fit:contain; }
@media (max-width:780px) { .brand-logo { width:63px; height:43px; } }