
*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0f2c4d;--navy2:#16406e;--gold:#c9973a;--ink:#1b1f24;--muted:#5c6672;--line:#e2e6ea;--bg:#fff;--soft:#f6f8fa}
html{scroll-behavior:smooth}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
a{color:var(--navy)}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.topbar{background:var(--navy);color:#cfdae6;font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:38px}
.topbar a{color:#fff;text-decoration:none}
.topbar .sp{margin-left:auto}
.hrow{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);font-weight:700;letter-spacing:.02em}
.mark{width:38px;height:38px;border-radius:9px;display:block;flex:0 0 auto}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
nav{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
nav a{text-decoration:none;color:var(--ink);font-size:14.5px;padding:26px 0;border-bottom:3px solid transparent;transition:.15s}
nav a:hover{color:var(--navy)}
nav a.on{border-bottom-color:var(--gold);color:var(--navy);font-weight:700}
nav a:hover{border-bottom-color:#dfe5ec}
.lang{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang button{border:0;background:#fff;padding:5px 10px;font-size:13px;cursor:pointer;color:var(--muted)}
.lang button.on{background:var(--navy);color:#fff}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px;font-size:17px;cursor:pointer}
.hero{background:var(--navy);color:#fff;padding:86px 0 76px;background-size:cover;background-position:center}
.hero h1{font-size:40px;line-height:1.2;max-width:19ch;font-weight:700}
.hero p{margin-top:18px;max-width:64ch;color:#dbe4ee;font-size:17.5px}
.cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:7px;text-decoration:none;font-weight:600;font-size:15px}
.btn-g{background:var(--gold);color:#22180a}
.btn-o{border:1px solid rgba(255,255,255,.55);color:#fff}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:54px;border:1px solid var(--line)}
.facts div{background:#fff;padding:20px}
.facts b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:7px;font-weight:600}
.facts span{font-size:15px;font-weight:600;color:var(--navy)}
.phero{position:relative;background:var(--navy);background-size:cover;background-position:center;padding:62px 0 56px;color:#fff}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,32,56,.72),rgba(11,32,56,.86))}
.phero .wrap{position:relative}
.phero h1{font-size:34px;font-weight:700}
.phero p{margin-top:10px;color:#d7e0ea;max-width:70ch}
section{padding:60px 0}
section.alt{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:28px;color:var(--navy);margin-bottom:9px}
h3.sub{font-size:19px;color:var(--navy);margin:26px 0 10px}
.lead{color:var(--muted);max-width:76ch;margin-bottom:30px;font-size:16.5px}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:10px;padding:24px;background:#fff;position:relative;overflow:hidden;transition:.18s}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent 70%)}
.card:hover{box-shadow:0 8px 26px rgba(15,44,77,.10);transform:translateY(-2px)}
.card h3{font-size:17px;color:var(--navy);margin-bottom:9px;display:flex;align-items:center;gap:10px}
.card .ic{width:26px;height:26px;flex:0 0 auto;color:var(--gold)}
.band .card .ic{color:#e2b768}
.card p{color:var(--muted);font-size:15px}
.card ul{margin:9px 0 0 18px;color:var(--muted);font-size:14.5px}
.card ul li{margin-bottom:4px}
.band{position:relative;color:#fff;background:var(--navy);background-size:cover;background-position:center;background-attachment:fixed;padding:78px 0}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,32,56,.62),rgba(11,32,56,.74))}
.band .wrap{position:relative}
.band h2{color:#fff}
.band .lead{color:#d7e0ea}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.band .card h3{color:#fff}
.band .card p,.band .card ul{color:#cfdae6}
.band .brands span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:8px}
.logos div{background:#fff;border:1px solid var(--line);border-radius:9px;height:74px;display:grid;place-items:center;padding:12px}
.logos img{max-width:100%;max-height:46px;width:auto;height:auto;display:block;filter:grayscale(1);opacity:.78;transition:.2s}
.logos div:hover img{filter:none;opacity:1}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
details.q{border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:10px}
details.q summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--navy);list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";float:right;color:var(--gold);font-size:20px;line-height:1}
details.q[open] summary::after{content:"–"}
details.q div{padding:0 20px 18px;color:var(--muted);font-size:15px}

/* появление блоков при прокрутке */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* полоса с цифрами */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.stats div{background:rgba(11,32,56,.55);padding:26px 20px;text-align:center}
.stats b{display:block;font-size:34px;font-weight:700;color:#fff;line-height:1.1}
.stats span{display:block;margin-top:8px;font-size:14px;color:#cfdae6}
/* призыв к действию перед подвалом */
.ctaband{background:linear-gradient(135deg,var(--navy),#1b4a7d);color:#fff;padding:52px 0}
.ctaband h3{font-size:25px;margin-bottom:8px}
.ctaband p{color:#d7e0ea;max-width:60ch}
.ctaband .btn-g{margin-top:20px}
/* плавающая кнопка whatsapp */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:.18s}
.fab:hover{transform:scale(1.07)}
.fab svg{width:30px;height:30px;fill:#fff}
/* подвал с картой сайта */
.fnav{display:flex;flex-direction:column;gap:7px}
.fnav a{color:#c4d2e0;text-decoration:none;font-size:14px}
.fnav a:hover{color:#fff}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.brands span{border:1px solid var(--line);border-radius:20px;padding:7px 15px;font-size:14px;color:var(--navy);background:#fff}
figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
figure img{width:100%;height:auto;display:block}
figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--soft)}
ol.steps{list-style:none;counter-reset:s;display:grid;gap:14px}
ol.steps li{counter-increment:s;border:1px solid var(--line);border-radius:9px;padding:18px 20px 18px 62px;position:relative;background:#fff}
ol.steps li::before{content:counter(s);position:absolute;left:18px;top:17px;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
ol.steps b{display:block;color:var(--navy);margin-bottom:3px}
ol.steps span{color:var(--muted);font-size:15px}
table.req{width:100%;border-collapse:collapse;font-size:15px}
table.req td{border:1px solid var(--line);padding:11px 14px;vertical-align:top}
table.req td:first-child{width:36%;color:var(--muted);background:var(--soft)}
form{display:grid;gap:14px;max-width:560px}
label{font-size:14px;color:var(--muted)}
input,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:15px}
textarea{min-height:130px;resize:vertical}
button.send{justify-self:start;border:0;background:var(--navy);color:#fff;padding:12px 26px;border-radius:7px;font-size:15px;font-weight:600;cursor:pointer}
.note{font-size:13px;color:var(--muted)}
.ok{display:none;padding:13px 16px;border-radius:8px;background:#eaf5ec;border:1px solid #bcdcc3;color:#22562f;font-size:15px}
footer{background:var(--navy);color:#c4d2e0;padding:42px 0;font-size:14px}
footer a{color:#fff}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}.g3,.g2,.fcols{grid-template-columns:1fr}
 nav{position:fixed;inset:68px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 16px;display:none}
 nav.open{display:flex}nav a{padding:11px 0;width:100%}.burger{display:block;margin-left:auto}
 .lang{position:absolute;right:74px;top:17px}.hero h1{font-size:29px}}
