:root{--c:#1f4e79;--c2:#2f6ea8;--bg:#f4f6f9;--card:#fff;--tx:#1b2430;--mut:#5d6672;--line:#dde3ea}
@media(prefers-color-scheme:dark){:root{--bg:#10151c;--card:#1a222d;--tx:#e8edf3;--mut:#9aa7b6;--line:#2b3644;--c2:#5b9bd5}}
*{box-sizing:border-box}
body{margin:0;font:17px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
h1{font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.15;margin:.2em 0 .5em}
h2{font-size:1.5rem;margin:2.2em 0 .6em;color:var(--c2)}
.mut{color:var(--mut);font-size:.92rem}
.hero{background:linear-gradient(135deg,#1f4e79,#2f6ea8);color:#fff;padding:48px 0 56px}
.hero .brand{font-weight:800;letter-spacing:.04em;opacity:.9;margin:0}
.hero .lead{font-size:1.1rem;max-width:720px;opacity:.95}
.btn{display:inline-block;background:#fff;color:var(--c);font-weight:700;border-radius:10px;padding:12px 18px;text-decoration:none;margin:6px 8px 0 0}
.btn.alt{background:transparent;color:#fff;border:1px solid #fff}
.contact .btn{background:var(--c);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.feat b{color:var(--c2)}
.feat p{margin:.4em 0 0;font-size:.95rem}
figure{margin:0;text-align:center}
figcaption{font-size:.88rem;color:var(--mut);margin-top:8px}
.phones{display:flex;gap:22px;overflow-x:auto;padding:8px 4px 16px;scroll-snap-type:x mandatory}
.phone{flex:0 0 210px;scroll-snap-align:start}
.phone img{width:100%;display:block;border:9px solid #111;border-radius:30px;background:#111;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:22px}
.screen{background:#d9dee5;border-radius:10px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.screen img{width:100%;display:block}
.screen figcaption{background:var(--card);margin:0;padding:8px}
.bar{height:22px;display:flex;gap:6px;align-items:center;padding:0 10px}
.bar i{width:10px;height:10px;border-radius:50%;background:#aab3bf}
.contact{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 22px 18px;margin-top:2.5em}
.contact h2{margin-top:.8em}
footer{padding:28px 16px 40px}
@media(max-width:520px){.screens{grid-template-columns:1fr}.phone{flex-basis:170px}}