/* Системный шрифт и локальные ресурсы: страница не зависит от сторонних загрузок. */
:root {
  --primary:#24624a; --primary-pressed:#184b37; --on-primary:#fff;
  --canvas:#fff; --surface:#f5f6f5; --surface-soft:#fafbfa;
  --ink:#19231e; --charcoal:#35433b; --slate:#5e6b63; --steel:#5e6b63; --stone:#5e6b63;
  --hairline:#e0e6e1; --hairline-soft:#edf0ed; --hairline-strong:#b8c5bc;
  --link:#24624a; --link-pressed:#184b37; --green:#24624a; --orange-deep:#784600; --purple-800:#514471;
  --tint-mint:#e8f2ec; --tint-lavender:#eeebf4; --tint-peach:#fff1db;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans); color-scheme:light;
}
* {box-sizing:border-box}
html {-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body {margin:0; background:var(--canvas); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img {max-width:100%; height:auto; display:block}
a {color:var(--link); text-decoration:none}
a:hover {color:var(--link-pressed); text-decoration:underline; text-underline-offset:4px}
a:focus-visible,summary:focus-visible {outline:3px solid var(--primary); outline-offset:5px; border-radius:4px}
.container {max-width:1200px; margin:0 auto; padding-inline:32px}
.skip {position:absolute; left:16px; top:8px; z-index:40; padding:12px 20px; background:var(--canvas); transform:translateY(-150%)}
.skip:focus {transform:none}
.promo {background:var(--surface); color:var(--charcoal); font-size:13px; text-align:center; padding:12px 20px}
.promo a {display:inline-block; margin-left:8px; font-weight:600}
.nav {position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--hairline)}
.nav .container {display:flex; align-items:center; gap:24px; min-height:72px}
.logo {display:inline-flex; align-items:center; gap:12px; color:var(--ink); font:600 23px/1 var(--display); letter-spacing:-1px}
.logo:hover {color:var(--ink); text-decoration:none}
.logo img {width:36px; height:36px; border-radius:10px}
.nav-links {display:flex; gap:16px}
.nav-links a {color:var(--slate); font-size:13px; padding-block:12px}
.nav-right {margin-left:auto; display:flex; align-items:center; gap:20px}
.langs {display:flex; font-size:12px}
.langs a {display:grid; place-items:center; min-width:40px; min-height:44px; color:var(--slate); border-radius:var(--r-sm)}
.langs a[aria-current] {color:var(--ink); font-weight:600; background:var(--surface)}
.btn {display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 20px; border-radius:var(--r-full); border:1px solid transparent; font:600 13px/1.4 var(--sans); text-align:center; transition:background .2s ease,border-color .2s ease}
.btn:hover {text-decoration:none}
.btn-lg {font-size:15px; padding:16px 28px; min-height:54px}
.btn-primary {background:var(--primary); color:var(--on-primary)}
.btn-primary:hover {background:var(--primary-pressed); color:var(--on-primary)}
.btn-secondary {background:var(--canvas); color:var(--ink); border-color:var(--hairline-strong)}
.btn-secondary:hover {background:var(--surface); color:var(--ink)}
.btn-on-dark-outline {color:#fff; background:rgba(255,255,255,.04); border-color:#65796d}
.btn-on-dark-outline:hover {color:#fff; background:rgba(255,255,255,.1); border-color:#94aa9d}
.hero {position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 50% 70%,#294438 0,transparent 60%),#101916; color:#fff; padding:96px 0 0; text-align:center}
.hero::after {content:""; position:absolute; z-index:-1; inset:auto 0 0; height:180px; background:var(--canvas)}
.eyebrow {display:inline-flex; align-items:center; gap:10px; font:500 11px/1.5 var(--sans); letter-spacing:1.5px; text-transform:uppercase; color:#c4d7cb}
.eyebrow i {width:6px; height:6px; border-radius:50%; background:#b7dac6; box-shadow:0 0 12px #7aab8d}
.hero h1 {font:600 clamp(40px,6.5vw,80px)/1.08 var(--display); letter-spacing:-.055em; margin:24px auto 0; max-width:20ch; text-wrap:balance}
.hero .subtitle {font-size:18px; line-height:1.65; color:#c0cec6; max-width:680px; margin:28px auto 0; text-wrap:pretty}
.actions {display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px}
.hero .btn-primary {background:#c2e3ce; color:#122b1d}
.hero .btn-primary:hover {background:#d7efdf}
.hero a:focus-visible {outline-color:#c2e3ce}
.hero .note {font-size:12px; color:#abbfb2; margin:20px 0 0}
.hero .note a {display:inline-block; padding-block:8px; color:#c2e3ce}
.mockup {margin:56px auto 0; max-width:1040px; border-radius:var(--r-md); overflow:hidden; background:#202420; border:1px solid #536158; box-shadow:0 32px 80px -32px #06150c66}
.mockup img {width:100%}
.hero .eyebrow,.hero h1,.hero .subtitle,.hero .actions,.hero .note {animation:appear .7s ease-out both}
.hero .mockup {animation:appear .9s ease-out both}
@keyframes appear {from {transform:translateY(8px)} to {transform:translateY(0)}}
.facts {padding:48px 0 0}
.facts ul {list-style:none; margin:0; padding:0 0 48px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--hairline)}
.facts li {text-align:center; padding:8px 20px}
.facts li+li {border-left:1px solid var(--hairline)}
.facts b {display:block; font:600 32px/1.2 var(--display); letter-spacing:-1px}
.facts span {display:block; margin-top:8px; font-size:13px; color:var(--slate)}
section.block {padding:96px 0}
section.block.tight {padding:56px 0}
section.alt {background:var(--surface)}
.head {max-width:760px; margin:0 auto 40px; text-align:center}
.head .kicker {font:600 11px/1.5 var(--sans); letter-spacing:1.8px; text-transform:uppercase; color:var(--primary)}
.head h2 {font:600 clamp(30px,4vw,48px)/1.12 var(--display); letter-spacing:-.04em; margin:16px 0 0; text-wrap:balance}
.head p {font-size:17px; color:var(--slate); margin:20px auto 0; max-width:660px; text-wrap:pretty}
.grid {display:grid; gap:16px}
.grid.cols-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.platform,.step,.price {border:1px solid var(--hairline); border-radius:var(--r-lg); padding:32px; background:var(--canvas)}
.card.tint {background:var(--surface-soft)}
.card h3 {font:600 20px/1.3 var(--display); letter-spacing:-.025em; margin:24px 0 12px; color:var(--ink)}
.card p {margin:0; color:var(--slate); font-size:15px}
.icon {width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--tint-mint)}
.icon svg {width:24px; height:24px}
section.block.platforms {padding-bottom:72px}
.platform {background:var(--surface-soft)}
.platform.available {background:var(--tint-mint); border-color:#bdd5c6}
.platform-top {display:flex; align-items:center; justify-content:space-between; gap:12px}
.platform .icon {background:transparent; color:var(--primary)}
.availability {font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--r-full); border:1px solid var(--hairline-strong); color:var(--slate)}
.available .availability {border-color:#bdd5c6; color:var(--primary)}
.platform h3 {font:600 28px/1.2 var(--display); letter-spacing:-.04em; margin:28px 0 8px}
.platform p {color:var(--slate); font-size:14px; margin:0}
.more {display:inline-block; margin-top:20px; font-size:14px; font-weight:600; padding-block:6px}
.community {display:flex; align-items:center; gap:28px; padding:40px; border:1px solid #bdd5c6; border-radius:var(--r-lg); background:var(--tint-mint)}
.community .icon {flex:none; width:56px; height:56px; background:var(--canvas); border-radius:var(--r-md)}
.community .head {flex:1; margin:0; text-align:left}
.community h2 {font-size:32px; margin-top:8px}
.community p {font-size:15px; margin:12px 0 0}
.community .btn {flex:none}
.banner {background:#101916; color:#c0cec6; border-radius:var(--r-lg); padding:48px; display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center}
.banner h2 {font:600 34px/1.15 var(--display); letter-spacing:-.035em; margin:0 0 20px; color:#fff; text-wrap:balance}
.banner p {margin:0 0 16px; font-size:15px}
.banner a:focus-visible {outline-color:#c2e3ce}
.banner .shot {border-radius:var(--r-md); overflow:hidden; border:1px solid #536158; background:#202420}
.badge {display:inline-block; font:600 11px/1.5 var(--sans); padding:6px 12px; border-radius:var(--r-full); background:var(--tint-mint); color:var(--primary)}
.tag {display:inline-block; font:500 12px/1.5 var(--sans); padding:5px 10px; border-radius:var(--r-sm)}
.tag.green {background:var(--tint-mint); color:var(--primary)}
.tag.purple {background:var(--tint-lavender); color:var(--purple-800)}
.tag.orange {background:var(--tint-peach); color:var(--orange-deep)}
.banner .tags {display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.steps {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:40px}
.step .n {font:500 28px/1.2 var(--display); letter-spacing:-1px; color:var(--primary)}
.step h3 {font:600 20px/1.3 var(--display); margin:24px 0 12px}
.step p {margin:0; color:var(--slate); font-size:15px}
.wide-shot {border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline); max-width:1040px; background:#202420}
.car {display:flex; flex-direction:column; gap:16px}
.car .top,.price .top {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.car .brand {font:600 11px/1.5 var(--sans); letter-spacing:1.8px; text-transform:uppercase; color:var(--slate)}
.car h3 {margin:0; font-size:28px}
.car ul {margin:0; padding-left:20px; color:var(--slate); font-size:15px}
.car li {margin:6px 0}
.note-line {text-align:center; color:var(--slate); font-size:14px; margin:24px auto 0; max-width:640px}
.table {background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-md); max-width:1040px; margin:0 auto}
.table table {width:100%; border-collapse:collapse; font-size:14px}
.table th {text-align:left; font-size:12px; font-weight:600; color:var(--slate); background:var(--surface-soft); padding:16px 24px; border-bottom:1px solid var(--hairline)}
.table td {padding:20px 24px; border-bottom:1px solid var(--hairline-soft); vertical-align:top; color:var(--slate)}
.table tr:last-child td {border-bottom:0}
.table td:first-child {font-weight:500; color:var(--ink)}
.table-wrap {overflow-x:auto}
.pricing {display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:16px; justify-content:center}
.price {display:flex; flex-direction:column}
.price.featured {background:var(--tint-mint); border-color:#bdd5c6}
.price h3 {font:600 28px/1.25 var(--display); letter-spacing:-.04em; margin:0}
.price .cost {font-size:18px; font-weight:600; margin:20px 0 4px}
.price .cost small {display:block; font-size:13px; font-weight:400; color:var(--slate); margin-top:4px}
.price ul,.checks {list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; font-size:15px}
.price li,.checks li {display:flex; gap:12px}
.price li svg,.checks svg {flex:none; width:18px; height:18px; margin-top:3px; color:var(--green)}
.duo {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.duo .card h3 {margin-top:0}
.faq {max-width:800px; margin:0 auto}
.faq details {border-bottom:1px solid var(--hairline); padding:4px 0}
.faq summary {list-style:none; cursor:pointer; font:500 18px/1.4 var(--display); padding:24px 40px 24px 0; position:relative}
.faq summary::-webkit-details-marker {display:none}
.faq summary::after {content:""; position:absolute; right:8px; top:29px; width:12px; height:12px; background:linear-gradient(var(--slate),var(--slate)) center/12px 1px no-repeat,linear-gradient(var(--slate),var(--slate)) center/1px 12px no-repeat}
.faq details[open] summary::after {background:linear-gradient(var(--slate),var(--slate)) center/12px 1px no-repeat}
.faq details p {margin:0 0 24px; color:var(--slate); max-width:70ch; font-size:15px}
.cta {background:var(--surface); border-radius:var(--r-lg); padding:64px 32px; text-align:center}
.cta h2 {font:600 clamp(30px,4vw,48px)/1.15 var(--display); letter-spacing:-.04em; margin:0; text-wrap:balance}
.cta p {font-size:17px; color:var(--slate); margin:20px auto 0; max-width:560px}
footer.site {border-top:1px solid var(--hairline); padding:64px 0 32px; color:var(--slate); font-size:13px}
.fcols {display:grid; grid-template-columns:2fr repeat(3,minmax(0,1fr)); gap:32px}
.fcols h4 {font-size:13px; font-weight:600; color:var(--ink); margin:0 0 16px}
.fcols ul {list-style:none; padding:0; margin:0}
.fcols a {color:var(--slate); display:inline-block; padding-block:7px}
.fcols .logo {display:inline-flex; padding:0; color:var(--ink)}
.fcols .about p {margin:20px 0 0; max-width:280px}
.legal-line {margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline-soft); display:grid; grid-template-columns:1fr 2fr; gap:24px; font-size:12px}
@media (max-width:1150px) {.nav-links {display:none}}
@media (max-width:1023px) {
  .hero {padding-top:72px}
  .banner {grid-template-columns:1fr; padding:32px}
  .grid.cols-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
  .platforms .grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps {grid-template-columns:1fr}
  .fcols {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px) {
  .container {padding-inline:20px}
  .nav .container {min-height:64px}
  .nav .btn {display:none}
  .nav-right {gap:8px}
  .hero {padding-top:56px}
  .hero .subtitle {font-size:16px}
  .hero::after {height:60px}
  .mockup {margin-top:40px; border-radius:12px}
  .facts {padding-top:32px}
  .facts ul {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; padding-bottom:32px}
  .facts li:nth-child(3) {border-left:0}
  .facts b {font-size:28px}
  section.block {padding:64px 0}
  section.block.tight {padding:32px 0}
  section.block.platforms {padding-bottom:32px}
  .head {margin-bottom:32px}
  .head p {font-size:16px}
  .grid.cols-3,.platforms .grid,.grid.cols-2,.duo,.pricing {grid-template-columns:1fr}
  .card,.platform,.step,.price {padding:24px}
  .community {flex-direction:column; align-items:flex-start; gap:24px; padding:28px}
  .community h2 {font-size:28px}
  .community .btn {align-self:stretch}
  .platform h3 {margin-top:20px}
  .banner {padding:28px; gap:24px}
  .banner h2 {font-size:28px}
  .table th,.table td {padding:16px 12px}
  .cta {padding:40px 24px}
  .legal-line {grid-template-columns:1fr; gap:16px}
}
@media (max-width:480px) {
  .hero .actions {flex-direction:column}
  .hero .actions .btn {width:100%}
  .hero .note {font-size:11px}
  .fcols {grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .hero .eyebrow,.hero h1,.hero .subtitle,.hero .actions,.hero .note,.hero .mockup {animation:none}
  .btn {transition:none}
}