@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@500;600&display=swap');

:root { --navy:#234667; --blue:#5d87a7; --pale:#dcebf2; --ice:#f3f8fa; --ink:#172b3d; --muted:#71818d; --line:#dce5e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.site-header { align-items:center; display:flex; gap:42px; height:84px; justify-content:space-between; margin:auto; max-width:1280px; padding:0 34px; }
.brand { align-items:center; color:var(--navy); display:flex; font-size:24px; font-weight:800; gap:11px; letter-spacing:.12em; }
.brand-mark { display:inline-block; height:35px; position:relative; transform:rotate(45deg); width:29px; }
.brand-mark i { background:var(--blue); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); display:block; height:24px; position:absolute; width:24px; }
.brand-mark i:nth-child(1) { background:var(--navy); left:0; top:0; }.brand-mark i:nth-child(2) { background:#9bb9ca; left:8px; top:8px; }.brand-mark i:nth-child(3) { background:#416b89; left:6px; top:16px; }
.nav { display:flex; gap:35px; margin-left:auto; }.nav a { color:#71808a; font-size:14px; font-weight:600; padding:12px 0; }.nav a.active,.nav a:hover { color:var(--navy); }
.header-phone { color:var(--navy); font-size:14px; font-weight:800; }.menu-button { display:none; background:none; border:0; color:var(--navy); font-size:23px; }
.hero { background:var(--navy); color:white; display:grid; grid-template-columns:1fr 1fr; min-height:505px; overflow:hidden; padding:85px max(34px,calc((100% - 1212px)/2)); position:relative; }
.hero-copy { position:relative; z-index:2; }.eyebrow { font-size:11px; font-weight:800; letter-spacing:.18em; margin:0 0 20px; opacity:.7; }.eyebrow.blue { color:var(--blue); opacity:1; }
h1,h2 { font-family:Oswald,Arial,sans-serif; font-weight:500; letter-spacing:-.02em; margin:0; } h1 { font-size:clamp(48px,6vw,82px); line-height:1.02; } h1 em { color:#b4d1df; font-style:normal; }.hero-text { color:#c3d2dd; font-size:15px; line-height:1.8; max-width:440px; margin:26px 0 33px; }
.button { border:0; cursor:pointer; display:inline-flex; gap:34px; justify-content:space-between; min-width:185px; padding:17px 19px; font-size:12px; font-weight:800; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button span { font-size:17px; line-height:10px; }.button-light { background:#f7fbfc; color:var(--navy); }.button-dark { background:var(--navy); color:#fff; }
.hero-art { position:relative; }.orb { border:1px solid rgba(197,225,237,.23); border-radius:50%; position:absolute; }.orb-one { height:475px; right:-90px; top:-115px; width:475px; }.orb-two { height:350px; right:20px; top:-50px; width:350px; }.car-line { bottom:-90px; color:rgba(178,210,224,.17); font-family:Oswald,sans-serif; font-size:410px; line-height:1; position:absolute; right:25px; transform:skew(-10deg); }
.catalog-section,.contacts { margin:auto; max-width:1280px; padding:88px 34px; }.section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:36px; }.section-heading h2,.contacts h2 { font-size:54px; }.catalog-status { color:var(--muted); font-size:13px; margin:0; }.filters { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:10px; margin-bottom:31px; padding-bottom:18px; }.filters select,.search { background:var(--ice); border:0; color:var(--ink); font-size:13px; height:48px; padding:0 15px; }.filters select { min-width:170px; }.search { align-items:center; display:flex; flex:1; gap:8px; max-width:410px; }.search span { color:var(--blue); font-size:24px; }.search input { background:none; border:0; outline:0; width:100%; }.filter-reset { background:none; border:0; color:var(--muted); cursor:pointer; font-size:12px; margin-left:auto; }
.car-grid { display:grid; gap:25px; grid-template-columns:repeat(3,1fr); min-height:280px; }.car-card { border:1px solid var(--line); cursor:pointer; overflow:hidden; transition:box-shadow .2s,transform .2s; }.car-card:hover { box-shadow:0 14px 35px #2346671a; transform:translateY(-3px); }.car-photo { background:var(--ice); height:220px; overflow:hidden; position:relative; }.car-photo img { height:100%; object-fit:cover; transition:transform .35s; width:100%; }.car-card:hover img { transform:scale(1.04); }.car-photo .no-photo { align-items:center; color:#9cafbb; display:flex; font-family:Oswald,sans-serif; font-size:43px; height:100%; justify-content:center; }.car-year { background:#fff; color:var(--navy); font-size:11px; font-weight:800; left:13px; padding:7px 9px; position:absolute; top:13px; }.car-info { padding:19px 18px 21px; }.car-title { font-family:Oswald,sans-serif; font-size:24px; margin:0 0 8px; }.car-spec { color:var(--muted); font-size:12px; min-height:18px; }.car-bottom { align-items:end; display:flex; justify-content:space-between; margin-top:20px; }.car-price { color:var(--navy); font-size:17px; font-weight:800; }.car-price small { color:var(--muted); display:block; font-size:10px; font-weight:500; margin-bottom:3px; }.car-action { color:var(--blue); font-size:21px; }.loading { color:var(--muted); grid-column:1/-1; padding:70px; text-align:center; }.empty { color:var(--muted); grid-column:1/-1; padding:50px 0; text-align:center; }
.request-band { align-items:center; background:var(--pale); display:flex; justify-content:space-between; padding:64px max(34px,calc((100% - 1212px)/2)); }.request-band h2 { color:var(--navy); font-size:43px; line-height:1.1; }
.contacts { display:grid; gap:80px; grid-template-columns:1fr 1fr; }.contact-lead { color:var(--muted); font-size:14px; line-height:1.8; max-width:440px; }.contact-details { align-items:flex-start; display:flex; flex-direction:column; gap:15px; justify-content:center; }.contact-details a { color:var(--navy); font-family:Oswald,sans-serif; font-size:28px; }.contact-details a:nth-child(n+3) { color:var(--blue); font-family:Manrope,sans-serif; font-size:14px; font-weight:700; }
footer { align-items:center; background:var(--navy); color:#b6c8d3; display:flex; font-size:11px; gap:40px; justify-content:space-between; padding:30px max(34px,calc((100% - 1212px)/2)); } footer .brand { color:white; font-size:16px; }
dialog { border:0; box-shadow:0 25px 80px #102b4050; max-width:480px; padding:38px; width:calc(100% - 32px); }dialog::backdrop { background:#152e3e99; }.dialog-close { background:none; border:0; color:var(--muted); cursor:pointer; font-size:28px; position:absolute; right:18px; top:13px; }.dialog-note { color:var(--muted); font-size:13px; margin:8px 0 25px; }.lead-form,form { display:flex; flex-direction:column; gap:14px; }form label { color:var(--muted); display:flex; flex-direction:column; font-size:11px; gap:6px; }form input,form textarea { border:1px solid var(--line); padding:11px; resize:vertical; }.consent { align-items:start; flex-direction:row; line-height:1.4; }.consent input { margin-top:2px; }.form-result { font-size:12px; margin:0; }.form-result.success { color:#267b5b; }.form-result.error { color:#b14a4a; }
@media (max-width:760px) { .site-header { height:70px; padding:0 20px; }.brand { font-size:19px; }.nav,.header-phone { display:none; }.menu-button { display:block; }.hero { display:block; min-height:560px; padding:65px 20px; }.hero-art { height:130px; }.orb-one { height:310px; right:-100px; top:-80px; width:310px; }.orb-two { height:240px; right:-45px; top:-40px; width:240px; }.car-line { bottom:-130px; font-size:250px; right:20px; }.catalog-section,.contacts { padding:62px 20px; }.section-heading { align-items:start; flex-direction:column; gap:13px; }.section-heading h2,.contacts h2 { font-size:43px; }.filters { align-items:stretch; flex-wrap:wrap; }.search { flex-basis:100%; max-width:none; }.filters select { flex:1; min-width:0; }.filter-reset { margin:0; }.car-grid { grid-template-columns:1fr; }.car-photo { height:230px; }.request-band { align-items:start; flex-direction:column; gap:28px; padding:53px 20px; }.request-band h2 { font-size:36px; }.contacts { display:flex; flex-direction:column; gap:32px; }.contact-details a { font-size:24px; }footer { align-items:flex-start; flex-direction:column; gap:16px; padding:30px 20px; } }