/* Landing v2 (14.10.2026) — on top of site.css: same tokens, fonts, nav and footer. */
@font-face{font-family:Familjen Grotesk;src:url(/fonts/familjen-grotesk-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Roboto;src:url(/fonts/roboto-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Roboto;src:url(/fonts/roboto-cyrillic-481dd0c0.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
html:lang(ru) body{font-family:Roboto,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}
html:lang(ru) .hero h1,html:lang(ru) .sectionHead h2,html:lang(ru) .final h2,html:lang(ru) .featureText h3,html:lang(ru) .trustGrid h3{font-family:Familjen Grotesk,Roboto,sans-serif;letter-spacing:-.04em}


/* Light/dark screenshots follow the page theme. */
html[data-theme=dark] .lt,html:not([data-theme=dark]) .dk{display:none!important}
.ph{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(14,92,70,.20))}
html[data-theme=dark] .ph{filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}

/* Hero */
.hero2{grid-template-columns:1fr .9fr;min-height:0;padding-block:56px 90px}
.hero2 h1{font-size:clamp(46px,5.4vw,80px)}
.heroPhone{position:relative;width:min(340px,80vw);margin-inline:auto}
.heroPhone .status{position:absolute}
.heroPhone .c1{top:22%;left:-34%}
.heroPhone .c2{top:40%;right:-30%}
.heroPhone .status strong{font-size:26px}
.heroPhone .status .warn{color:var(--warning)}
.chipDue{display:block;font-size:10px;color:var(--muted)}

/* Three steps */
.stepsRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1000px;margin:64px auto 0}
.stepShot{margin:0;text-align:center}
.stepShot .ph{max-width:270px;margin-inline:auto}
.stepShot figcaption{padding-top:18px;font-family:Familjen Grotesk,Roboto,sans-serif;font-size:18px;letter-spacing:-.02em}
.stepShot figcaption b{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-family:Roboto Mono,monospace}
html[data-theme=dark] .stepShot figcaption b{color:#08120e}

/* Feature rows */
.features2{display:grid;gap:110px;margin-top:80px}
.featureRow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}
.featureRow.flip .featureMedia{order:-1}
.featureText .ico{margin-bottom:26px}
.featureText small{display:block;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:11px;font-weight:750;margin-bottom:14px}
.featureText h3{font-family:Familjen Grotesk,Archivo,ui-sans-serif,sans-serif;letter-spacing:-.045em;font-size:clamp(30px,3.4vw,46px);line-height:1.04;margin:0 0 18px;font-weight:620}
.featureText p{color:var(--muted);font-size:17px;line-height:1.6;max-width:470px;margin:0}
.featureMedia{position:relative;display:flex;justify-content:center}
.featureMedia .one{width:min(300px,72vw)}
.duo{position:relative;width:min(470px,100%);height:auto}
.duo .back{position:absolute;width:56%;left:0;top:9%;opacity:.96}
.duo .front{position:relative;width:62%;margin-left:38%}

/* The mechanic row sits on the dark band, like the live site's mechanic section */
.mechanicBand{background:#0b1620;color:#f2f3ee}
.mechanicBand .featureText p,.mechanicBand .featureText small{color:#aeb3ad}
.mechanicBand .featureText h3 em{color:#6fd3ae;font-style:normal}
.mechanicBand .ico{background:#16211c}
.mechanicBand .ico:after{background:#6fd3ae}

/* Trust */
.trustGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px}
.trustGrid article{border:1px solid var(--line);background:var(--surface);border-radius:25px;padding:26px}
.trustGrid .ico{margin-bottom:34px}
.trustGrid h3{font-family:Familjen Grotesk,Archivo,ui-sans-serif,sans-serif;letter-spacing:-.035em;font-size:22px;margin:0 0 10px}
.trustGrid p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.trustGrid a{text-decoration:underline;text-underline-offset:2px}

.final2{min-height:560px}
.final2 .success{margin-top:6px}

@media (width<=900px){
  .hero2{grid-template-columns:1fr;gap:56px;padding-block:36px 70px}
  .heroPhone{width:min(300px,70vw)}
  .heroPhone .c1{left:-26%}
  .heroPhone .c2{right:-24%}
  .featureRow{grid-template-columns:1fr;gap:38px}
  .featureRow.flip .featureMedia{order:0}
  .features2{gap:84px}
  .trustGrid{grid-template-columns:1fr 1fr}
}
@media (width<=560px){
  .navlinks{display:none}
  .nav .button.small{padding:11px 13px;font-size:13px}
  .hero2 h1{font-size:44px}
  .heroPhone{width:240px}
  .heroPhone .c1{left:-24%;top:18%}
  .heroPhone .c2{right:-28%;top:44%}
  .heroPhone .status{min-width:0;padding:9px 11px}
  .heroPhone .status strong{font-size:20px}
  .stepsRow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:40px -14px 0;padding:0 14px 8px;scrollbar-width:none}
  .stepsRow::-webkit-scrollbar{display:none}
  .stepShot{flex:0 0 70%;scroll-snap-align:center}
  .stepShot figcaption{font-size:16px}
  .featureText h3{font-size:31px}
  .featureText p{font-size:16px}
  .featureMedia .one{width:250px}
  .trustGrid{grid-template-columns:1fr}
  .trustGrid .ico{margin-bottom:22px}
}
#features,#trust,#how{padding-block:100px}
.features2{gap:90px}
@media (width<=560px){#features,#trust,#how{padding-block:72px}.features2{gap:72px}}