:root{
  --bg:#f1f2f6; --card:#ffffff; --ink:#141414; --mut:#5d6470; --line:#e3e5ea;
  --accent:#0f8a3c; --chip:#e9ecf1; --shadow:0 18px 40px rgba(20,20,20,.12);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1012; --card:#191b1f; --ink:#f1f2f4; --mut:#a3a9b4; --line:#2a2d33;
    --accent:#2fbf63; --chip:#23262c; --shadow:0 18px 40px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1012; --card:#191b1f; --ink:#f1f2f4; --mut:#a3a9b4; --line:#2a2d33;
  --accent:#2fbf63; --chip:#23262c; --shadow:0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--ink);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand img{border-radius:8px}
nav{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
nav a{text-decoration:none;color:var(--mut);font-weight:650;font-size:15px;white-space:nowrap}
nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:40px}
.appicon{border-radius:20px;box-shadow:var(--shadow);margin-bottom:22px}
h1{font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px;font-weight:850}
.lead{font-size:clamp(18px,2.2vw,21px);color:var(--mut);margin:0 0 26px;max-width:36em}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:13px 22px;border-radius:999px;font-weight:750;text-decoration:none}
.btn:hover{opacity:.9}
.badge{display:inline-block;padding:12px 18px;border-radius:999px;background:var(--chip);font-weight:700;font-size:15px}
.fine{color:var(--mut);font-size:14.5px;margin-top:18px}
.phones{position:relative;height:610px}
.phone{position:absolute;width:250px;border-radius:34px;border:8px solid #141414;box-shadow:var(--shadow);background:#141414}
.phone.p0{right:130px;top:0;z-index:2}
.phone.p1{right:0;top:56px}

/* features */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-top:24px;padding-bottom:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 18px}
.card h3{margin:0 0 10px;font-size:19px;letter-spacing:-.01em}
.card ul{margin:0;padding-left:20px;color:var(--mut)}
.card li{margin:6px 0}
.gallery{display:flex;gap:16px;overflow-x:auto;padding-top:20px;padding-bottom:28px;scroll-snap-type:x mandatory}
.gallery img{width:220px;flex:0 0 auto;border-radius:24px;border:1px solid var(--line);scroll-snap-align:start}
.twin{display:flex;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;margin-top:8px;margin-bottom:56px;max-width:1040px}
.twin img{border-radius:16px;flex:0 0 auto}
.twin h3{margin:0 0 4px}
.twin p{margin:0 0 8px;color:var(--mut)}
.twin a{font-weight:700}

/* documents */
.doc{max-width:760px;padding-top:48px;padding-bottom:64px}
.doc h1{font-size:clamp(30px,4.4vw,44px)}
.doc h2{font-size:22px;margin:36px 0 8px;letter-spacing:-.01em}
.doc h3{font-size:17.5px;margin:22px 0 4px}
.doc p,.doc li{color:var(--mut)}
.doc b{color:var(--ink)}
.doc li{margin:6px 0}
.meta{color:var(--mut);font-size:15px}
.contact{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;color:var(--mut)}
.contact b{color:var(--ink)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:12px 16px 12px 56px;background:var(--card);border:1px solid var(--line);border-radius:16px;margin:10px 0}
.steps li::before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:14px}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mut);font-size:15px}
footer .wrap{display:grid;gap:14px}
footer b{color:var(--ink)}
footer .links{display:flex;flex-wrap:wrap;gap:8px 18px}
footer .links a{color:var(--mut)}
footer .small{font-size:13.5px}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:36px;gap:28px}
  .phones{height:auto;display:flex;justify-content:center}
  .phone{position:static;width:min(240px,62vw)}
  .phone.p1{display:none}
  .features{grid-template-columns:1fr}
  nav{gap:14px}
  nav a:first-child,nav a:nth-child(2){display:none}
}