:root {
    --navy: #071b4d;
    --navy-2: #0d2b70;
    --red: #e31e2c;
    --red-dark: #bb1320;
    --ink: #0c1830;
    --muted: #667085;
    --white: #ffffff;
    --line: #e9edf4;
    --soft: #f4f7fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(7,27,77,.07), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(227,30,44,.06), transparent 22%),
        radial-gradient(circle at 60% 75%, rgba(7,27,77,.05), transparent 25%);
    z-index: -2;
}

.site-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23071b4d' stroke-width='1'%3E%3Cpath d='M15 75c30-50 70-50 120 0-30 50-70 50-120 0Z' opacity='.22'/%3E%3Ccircle cx='75' cy='75' r='40' opacity='.14'/%3E%3Cpath d='M0 75h150M75 0v150' opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
}

.container { max-width: 1200px; }
.navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7,27,77,.96);
    box-shadow: 0 12px 30px rgba(7,27,77,.18);
}
.navbar { min-height: 80px; display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px 12px 3px 12px; background:#fff; color:var(--red); font-weight:900; font-size:22px; transform: skew(-8deg); }
.brand strong { display:block; font-weight:900; letter-spacing:.08em; font-size:15px; }
.brand small { display:block; font-size:9px; color:#cad4ef; letter-spacing:.14em; margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:20px; }
.nav-links a { color:#eef2ff; font-size:13px; font-weight:700; text-decoration:none; opacity:.84; transition:.25s; }
.nav-links a:hover { opacity:1; color:#fff; }
.nav-cta { padding:11px 16px; background:var(--red); border-radius:12px 12px 4px 12px; opacity:1 !important; box-shadow:0 8px 18px rgba(227,30,44,.22); }
.menu-toggle { display:none; background:none; border:0; padding:6px; }
.menu-toggle span { display:block; width:25px; height:2px; background:#fff; margin:5px 0; }

.hero-section { background: linear-gradient(135deg,#061842 0%,#092462 57%,#071b4d 100%); color:#fff; min-height: 690px; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-section::before { content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='500' height='500' viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10'%3E%3Cpath d='M0 250C100 120 200 120 320 250S450 380 500 250' stroke-width='2'/%3E%3Cpath d='M0 320C100 190 230 200 330 310S450 420 500 320' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); background-size:600px 600px; opacity:.65; }
.hero-section::after { content:""; position:absolute; right:-180px; top:-220px; width:520px; height:520px; border-radius:50%; border:60px solid rgba(255,255,255,.06); }
.hero-section h1 { font-size:clamp(44px,6vw,72px); line-height:.98; letter-spacing:-.05em; margin:18px 0 20px; max-width:760px; font-weight:900; }
em { color: #ff4a55; font-style:normal; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.15em; font-weight:900; color:var(--navy); }
.eyebrow span { width:26px; height:3px; border-radius:3px; background:var(--red); }
.eyebrow.light { color:#fff; }
.hero-copy { color:#d9e3ff; max-width:650px; font-size:16px; line-height:1.8; }
.hero-points { display:grid; gap:7px; margin:24px 0; color:#fff; font-size:14px; font-weight:700; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; border:0; border-radius:16px 16px 5px 16px; font-weight:800; font-size:13px; text-decoration:none; cursor:pointer; transition:.25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--red); color:#fff; box-shadow:0 14px 28px rgba(227,30,44,.22); }
.btn-primary:hover { background:var(--red-dark); }
.btn-light { background:#eff4ff; color:var(--navy); }
.btn-white { background:#fff; color:var(--navy); }
.btn-full { width:100%; }
.pulse-soft { animation:pulseSoft 2.5s infinite; }
@keyframes pulseSoft { 0%,100% { box-shadow:0 14px 28px rgba(227,30,44,.22); } 50% { box-shadow:0 14px 38px rgba(227,30,44,.42); } }
.hero-mini-stats { display:flex; gap:30px; margin-top:28px; }
.hero-mini-stats div { display:grid; gap:2px; }
.hero-mini-stats strong { font-size:19px; }
.hero-mini-stats span { font-size:11px; color:#aab8df; }
.hero-visual { position:relative; min-height:520px; display:grid; place-items:center; }
.hero-card { position:relative; width:min(590px,100%); padding:12px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); border-radius:32px 32px 10px 32px; box-shadow:0 30px 80px rgba(0,0,0,.25); transform:rotate(1.2deg); }
.hero-card img { width:100%; height:390px; object-fit:cover; border-radius:25px 25px 6px 25px; display:block; }
.hero-card-top { display:flex; justify-content:space-between; padding:4px 10px 11px; font-size:11px; color:#dce6ff; }
.hero-card-top b { color:#ffe3e5; }
.hero-car-info { display:flex; align-items:center; justify-content:space-between; padding:14px 8px 5px; }
.hero-car-info span { color:#a7b6de; font-size:9px; letter-spacing:.14em; }
.hero-car-info h3 { margin:4px 0 0; font-size:21px; }
.price-badge { background:#fff; color:var(--navy); padding:10px 12px; border-radius:12px 12px 4px 12px; font-size:10px; font-weight:900; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(1px); }
.hero-orb-a { width:180px; height:180px; border:20px solid rgba(227,30,44,.22); right:2%; top:2%; }
.hero-orb-b { width:90px; height:90px; border:12px solid rgba(255,255,255,.1); left:2%; bottom:6%; }
.red-streak { position:absolute; width:140%; height:24px; background:var(--red); transform:rotate(-11deg); opacity:.8; bottom:16%; left:-20%; border-radius:100%; filter:blur(.2px); }

.section-pad { padding:2rem 0; }
.section-curve { clip-path: ellipse(95% 98% at 50% 50%); }
.section-curve-reverse { clip-path: ellipse(110% 98% at 50% 50%); }
.catalog-section { background:#fff; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.section-heading h2 { font-size:clamp(34px,4.5vw,54px); line-height:1; letter-spacing:-.04em; margin:12px 0 0; font-weight:900; max-width:740px; }
.section-heading > p { max-width:390px; color:var(--muted); line-height:1.7; font-size:14px; }
.section-heading.center { display:block; text-align:center; }
.section-heading.center .eyebrow { justify-content:center; }
.section-heading.center h2 { margin-left:auto; margin-right:auto; }

.catalog-card { background:#fff; border:1px solid var(--line); overflow:hidden; border-radius:28px 28px 7px 28px; box-shadow:0 12px 40px rgba(7,27,77,.07); transition:.3s; }
.catalog-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(7,27,77,.13); }
.catalog-image { position:relative; height:245px; overflow:hidden; background:#eef3fb; }
.catalog-image img { width:100%; height:100%; object-fit:cover; transition:.55s; }
.catalog-card:hover .catalog-image img { transform:scale(1.05); }
.catalog-chip { position:absolute; top:14px; left:14px; padding:7px 9px; border-radius:10px 10px 3px 10px; background:var(--red); color:#fff; font-size:9px; font-weight:900; letter-spacing:.1em; }
.catalog-body { padding:20px; }
.catalog-body h3 { margin:0; font-size:22px; font-weight:900; letter-spacing:-.03em; }
.catalog-body p { color:var(--muted); font-size:12px; line-height:1.6; min-height:38px; margin:7px 0 14px; }
.price-row { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:15px; }
.price-current { color:var(--navy); font-size:18px; font-weight:900; }
.price-old { color:#9aa2b1; text-decoration:line-through; font-size:12px; }
.card-actions { display:grid; grid-template-columns:1fr auto; gap:8px; }
.detail-btn { min-height:48px; border:1px solid var(--line); border-radius:15px 15px 5px 15px; background:#f7f9fd; color:var(--navy); font-size:12px; font-weight:800; cursor:pointer; }

.promo-section { background:#f3f6fc; }
.promo-banner { background:var(--navy); color:#fff; border-radius:32px 32px 8px 32px; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; overflow:hidden; }
.promo-banner::after { content:""; position:absolute; right:-80px; bottom:-120px; width:310px; height:310px; border:60px solid rgba(255,255,255,.06); border-radius:50%; }
.promo-banner h2 { font-size:clamp(28px,4vw,42px); margin:10px 0 6px; line-height:1; max-width:700px; letter-spacing:-.04em; }
.promo-banner p { color:#b9c7e7; margin:0; font-size:13px; }
.promo-feature { display:grid; grid-template-columns:1.05fr .95fr; background:#fff; overflow:hidden; border-radius:30px 30px 8px 30px; border:1px solid var(--line); box-shadow:0 18px 45px rgba(7,27,77,.08); }
.promo-feature-image { position:relative; min-height:410px; }
.promo-feature-image img { width:100%; height:100%; object-fit:cover; display:block; }
.floating-chip { position:absolute; left:15px; top:15px; background:#fff; color:var(--red); padding:9px 11px; border-radius:12px 12px 4px 12px; font-weight:900; font-size:10px; }
.promo-feature-content { padding:30px; display:flex; flex-direction:column; justify-content:center; }
.promo-label { color:var(--red); font-size:10px; font-weight:900; letter-spacing:.12em; }
.promo-feature-content h3 { font-size:32px; margin:8px 0; font-weight:900; }
.promo-feature-content p { color:var(--muted); font-size:13px; line-height:1.7; }
.promo-feature-content .btn { margin-top:10px; width:max-content; }
.promo-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.promo-price strong { font-size:24px; color:var(--navy); }
.promo-price s { color:#99a0ae; font-size:13px; }
.promo-list { align-content:start; }
.promo-mini-card { background:#fff; border:1px solid var(--line); border-radius:25px 25px 6px 25px; overflow:hidden; }
.promo-mini-card img { width:100%; height:170px; display:block; object-fit:cover; }
.promo-mini-body { padding:16px; }
.promo-mini-body h4 { margin:0 0 4px; font-size:17px; font-weight:900; }
.promo-mini-body .mini-price { font-size:13px; font-weight:900; color:var(--navy); }
.promo-mini-body s { color:#9aa2b1; font-size:11px; margin-left:5px; }
.promo-mini-body .btn { width:100%; margin-top:11px; min-height:42px; font-size:11px; }

.benefits-section { background:#fff; }
.benefit-card { padding:24px; border:1px solid var(--line); border-radius:25px 25px 6px 25px; background:linear-gradient(160deg,#fff,#f7f9fd); transition:.3s; }
.benefit-card:hover { border-color:#dbe3f4; transform:translateY(-6px); }
.benefit-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px 13px 4px 13px; background:var(--navy); color:#fff; font-size:11px; font-weight:900; margin-bottom:20px; }
.benefit-card h3 { margin:0 0 8px; font-size:18px; font-weight:900; }
.benefit-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.recommendation { margin-top:28px; padding:28px; background:#f4f7fc; border:1px solid #e2e8f4; border-radius:30px 30px 7px 30px; display:grid; grid-template-columns:1fr 1.15fr; gap:22px; align-items:center; }
.recommendation h3 { margin:8px 0 4px; font-size:29px; font-weight:900; }
.recommendation p { color:var(--muted); font-size:13px; line-height:1.7; margin:0; }
.recommendation-form { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
.recommendation select, .field input, .field textarea, .field select { width:100%; border:1px solid #dbe2ee; background:#fff; padding:13px 14px; border-radius:14px 14px 4px 14px; outline:none; color:var(--ink); font:inherit; font-size:12px; }
.recommendation select:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color:#93a8d6; box-shadow:0 0 0 3px rgba(7,27,77,.06); }
.recommend-result { grid-column:1/-1; display:none; padding:14px 16px; border-radius:16px; background:#fff; border:1px dashed #ccd6ea; color:var(--navy); font-size:13px; line-height:1.7; }
.recommend-result.active { display:block; animation:slideIn .3s ease; }
@keyframes slideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.gallery-section { background:#f5f8fd; }
.gallery-grid { columns:3 260px; column-gap:16px; }
.gallery-item { break-inside:avoid; margin-bottom:16px; cursor:pointer; position:relative; overflow:hidden; border-radius:22px 22px 5px 22px; background:#eaf0f9; }
.gallery-item img { width:100%; display:block; transition:.5s; }
.gallery-item:hover img { transform:scale(1.035); }
.gallery-overlay { position:absolute; left:0; right:0; bottom:0; padding:24px 15px 14px; background:linear-gradient(to top,rgba(7,27,77,.8),transparent); color:#fff; font-size:11px; font-weight:800; opacity:0; transition:.25s; }
.gallery-item:hover .gallery-overlay { opacity:1; }

.contact-section { background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.contact-section::before { content:""; position:absolute; width:500px; height:500px; border:80px solid rgba(255,255,255,.04); border-radius:50%; right:-160px; top:-210px; }
.contact-info { padding:16px 0; }
.contact-info h2 { margin:15px 0; font-size:clamp(34px,5vw,56px); line-height:1; letter-spacing:-.05em; font-weight:900; }
.contact-info p { color:#b9c6e3; line-height:1.8; font-size:14px; max-width:500px; }
.contact-stack { display:grid; gap:11px; margin-top:24px; }
.contact-stack a, .contact-stack div { color:#fff; text-decoration:none; display:flex; gap:10px; align-items:center; font-size:13px; }
.contact-stack span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px 9px 3px 9px; background:rgba(255,255,255,.08); }
.contact-form { background:#fff; color:var(--ink); padding:27px; border-radius:30px 30px 7px 30px; box-shadow:0 24px 60px rgba(0,0,0,.17); }
.form-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:18px; }
.form-head span { font-size:11px; letter-spacing:.13em; font-weight:900; }
.form-head small { color:var(--muted); font-size:10px; }
.field { display:grid; gap:6px; }
.field label { font-size:11px; font-weight:800; color:#42506a; }
.field textarea { resize:vertical; }

.map-section { padding:70px 0 90px; background:#fff; }
.map-wrap { display:grid; grid-template-columns:.75fr 1.25fr; border:1px solid var(--line); overflow:hidden; border-radius:28px 28px 7px 28px; background:#f4f7fc; min-height:370px; }
.map-copy { padding:35px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.map-copy h2 { margin:13px 0 8px; font-size:34px; line-height:1; font-weight:900; letter-spacing:-.04em; }
.map-copy p { color:var(--muted); font-size:13px; line-height:1.7; max-width:360px; }
.map-wrap iframe { width:100%; height:100%; min-height:370px; border:0; }

.footer { background:#041437; color:#dfe7fa; padding:24px 0; font-size:11px; }
.footer div { display:flex; flex-direction:column; gap:4px; }
.footer strong { font-size:11px; letter-spacing:.12em; }
.footer span { color:#91a3cb; }
.footer-wa { color:#fff; text-decoration:none; font-weight:800; }
.floating-wa { position:fixed; right:20px; bottom:20px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:#fff; text-decoration:none; box-shadow:0 12px 25px rgba(37,211,102,.35); z-index:60; animation:floatWa 2.7s ease-in-out infinite; }
.floating-wa span { font-size:25px; transform:rotate(-30deg); }
@keyframes floatWa { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

.lightbox { position:fixed; inset:0; display:none; place-items:center; background:rgba(2,8,25,.92); padding:30px; z-index:100; }
.lightbox.active { display:grid; animation:fadeIn .2s ease; }
.lightbox img { max-width:min(1100px,92vw); max-height:82vh; object-fit:contain; border-radius:18px; }
.lightbox-close { position:absolute; right:18px; top:15px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:28px; cursor:pointer; }
.lightbox-caption { position:absolute; bottom:24px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.14s; }

@media (max-width: 1024px) {
    .nav-links { gap:13px; }
    .nav-links a { font-size:12px; }
    .hero-section { min-height:auto; padding:90px 0; }
    .hero-visual { min-height:460px; }
    .promo-feature { grid-template-columns:1fr; }
    .promo-feature-image { min-height:330px; }
    .recommendation { grid-template-columns:1fr; }
}

@media (max-width: 820px) {
    .menu-toggle { display:block; }
    .nav-links { display:none; position:absolute; left:15px; right:15px; top:76px; padding:16px; background:var(--navy); border-radius:18px; box-shadow:0 18px 35px rgba(0,0,0,.22); flex-direction:column; align-items:stretch; }
    .nav-links.open { display:flex; }
    .nav-links a { padding:9px 8px; }
    .hero-section h1 { font-size:48px; }
    .section-pad { padding:78px 0; }
    .section-heading { flex-direction:column; align-items:flex-start; }
    .section-heading.center { align-items:center; text-align:center; }
    .promo-banner { flex-direction:column; align-items:flex-start; }
    .recommendation-form { grid-template-columns:1fr; }
    .map-wrap { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
    .navbar { min-height:72px; }
    .hero-section { padding:70px 0 86px; }
    .hero-section h1 { font-size:42px; }
    .hero-copy { font-size:14px; }
    .hero-mini-stats { gap:18px; }
    .hero-mini-stats strong { font-size:16px; }
    .hero-visual { min-height:350px; }
    .hero-card img { height:260px; }
    .hero-car-info h3 { font-size:18px; }
    .section-heading h2 { font-size:38px; }
    .promo-feature-content { padding:22px; }
    .promo-banner { padding:24px; }
    .contact-form { padding:20px; }
    .floating-wa { right:14px; bottom:14px; }
}