@font-face {
  font-family: Inter;
  src: url('inter-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  src: url('inter-cyrillic.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'NOWA Symbols';
  src: url('symbols.woff2') format('woff2');
  font-display: block;
}

:root {
  color-scheme: dark;
  --ink: #111015;
  --lime: #e3f503;
  --paper: #f2f1eb;
  --white: #f8f8f4;
  --muted: #b9b8bf;
  --rule: rgba(255, 255, 255, .14);
  --header-height: 73px;
  --gutter: clamp(24px, 5.3vw, 94px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
  background: var(--ink);
  color: var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; min-width: 288px; }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.section-light :focus-visible, .join-dialog :focus-visible { outline-color: #525b00; }

.shell { width: min(calc(100% - var(--gutter) * 2), 1440px); margin-inline: auto; }
.accent { color: var(--lime); }
.icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font: normal 400 21px/1 'NOWA Symbols';
  font-feature-settings: 'liga';
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
}
.svg-symbols { position: absolute; pointer-events: none; }
.header-icon, .footer-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  transform: translateY(-150%);
  background: var(--lime);
  color: var(--ink);
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  color: var(--white);
  background: linear-gradient(105deg, #1b1a20f5, #111015f5 58%, #202115f5);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: calc(var(--header-height) - 1px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.brand { width: 125px; display: inline-block; justify-self: start; }
.brand img { width: 100%; height: auto; }
.header-inner .brand { width: 132px; max-width: 100%; }
.main-nav {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #f8f8f406;
}
.main-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 41px;
  padding-inline: 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #e4e3e7;
  font-size: .855rem;
  font-weight: 650;
  transition: color .2s, background-color .2s, border-color .2s;
}
.main-nav .header-icon { color: var(--lime); }
.main-nav a:hover { background: #ffffff0d; }
.main-nav a[aria-current] { color: var(--lime); border-color: #e3f5034a; background: #e3f50314; }
.reading-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--lime);
  transform-origin: left;
  transform: scaleX(var(--reading, 0));
  pointer-events: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .881rem;
  font-weight: 730;
  line-height: 1.2;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.button .icon { transition: transform .32s var(--ease-out); }
.button:hover .icon, .text-link:hover .icon { transform: translate(3px, -2px); }
.button-header { justify-self: end; min-height: 44px; gap: 14px; padding-inline: 15px; white-space: nowrap; }
.button-header .header-icon { transition: transform .25s var(--ease-out); }
.button-header:hover .header-icon { transform: translateY(2px); }
.button-accent { background: var(--lime); color: var(--ink); }
.button-accent:hover { background: #f0ff49; box-shadow: 0 5px 28px #e3f53842; }
.button-header[aria-current] { box-shadow: 0 0 0 3px #e3f5032e; }
.button-outline { border-color: #fbfbfb58; background: #11101546; color: var(--white); }
.button-outline:hover { border-color: #f8f8f4; background: #f8f8f41a; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: #303121; }

.menu-toggle, .dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.menu-toggle { background: #f8f8f408; transition: background-color .2s, color .2s, border-color .2s; }
.menu-toggle:hover, .menu-toggle[aria-expanded='true'] { color: var(--lime); border-color: #e3f50365; background: #e3f50311; }
.menu-line-top, .menu-line-bottom { transition: transform .25s var(--ease-out); }
.menu-line-top { transform-origin: 12px 7px; }
.menu-line-bottom { transform-origin: 12px 17px; }
.menu-line-middle { transition: opacity .16s; }
.menu-toggle[aria-expanded='true'] .menu-line-top { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); }
.menu-toggle[aria-expanded='true'] .menu-line-middle { opacity: 0; }

.hero {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  min-height: clamp(570px, 50vw, 800px);
  overflow: hidden;
  overflow: clip;
  background: #16151a;
}
.hero-picture, .hero-overlay { position: absolute; inset: 0; z-index: -1; }
.hero-picture img {
  width: 100%;
  height: calc(100% + 32px);
  object-fit: cover;
  object-position: 50% 62%;
  transform: translateY(var(--hero-offset, 0px));
}
.hero-overlay {
  background: linear-gradient(90deg, #0b0a0eea 1%, #0b0a0ecf 22%, #0b0a0e70 44%, #0b0a0e0d 66%),
              linear-gradient(0deg, #0b0a0e7d, transparent 25%);
}
.hero-inner { padding-block: 83px 112px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .6875rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .155em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(4.6rem, 7.4vw, 8.1rem);
  font-weight: 780;
  line-height: .94;
  letter-spacing: -.066em;
}
.hero-line { display: block; width: fit-content; overflow: hidden; overflow: clip; padding: .035em .11em .105em .035em; margin: -.035em -.11em -.105em -.035em; }
.hero-line > span { display: block; }
.hero-description { max-width: 360px; margin-top: 30px; color: #e1dfe2; font-size: 1.0625rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }

.service-bar { border-top: 1px solid #e3f5032e; border-bottom: 1px solid var(--rule); background: #1b1a1f; }
.service-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.service-bar a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 23px clamp(12px, 2.2vw, 32px);
  border-left: 1px solid var(--rule);
  font-size: .82rem;
  font-weight: 680;
  transition: background-color .25s;
}
.service-bar a:last-child { border-right: 1px solid var(--rule); }
.service-bar a:hover { background: #e3f50312; }
.service-bar-icon { color: var(--lime); }
.service-bar-arrow { color: #cccbd2; font-size: 17px; transition: transform .28s var(--ease-out); }
.service-bar a:hover .service-bar-arrow { transform: translateY(3px); }

.section-light { color-scheme: light; background: var(--paper); color: var(--ink); }
.services, .app-section { padding-block: clamp(76px, 8.8vw, 138px); }
.section-heading { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 28px; margin-bottom: 44px; }
.section-label { margin-bottom: 20px; }
.section-label::before { content: ''; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }
.section-light .section-label { color: #4d4e36; }
main h2 {
  font-size: clamp(3.2rem, 5.4vw, 6.3rem);
  font-weight: 775;
  line-height: .98;
  letter-spacing: -.066em;
}
.section-intro { margin: 0 0 4px auto; max-width: 330px; font-size: 1.025rem; line-height: 1.6; color: #49484d; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(295px, 30vw, 435px);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  padding: clamp(18px, 2vw, 29px);
  border: 1px solid #ffffff19;
  border-radius: 19px;
  background: #17161a;
  color: var(--white);
}
.service-card-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 77%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease-out);
}
.service-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #1010143b 0%, transparent 26%, #13121720 49%, #131217 78%);
}
.service-card:hover .service-card-image { transform: scale(1.061); }
.service-card-icon { width: 41px; height: 41px; background: var(--lime); color: var(--ink); border-radius: 8px; }
.service-card-body { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.service-card h3 { font-size: clamp(1.35rem, 2.27vw, 2.55rem); line-height: 1.1; letter-spacing: -.06em; font-weight: 720; }
.service-card p { margin-top: 9px; max-width: 265px; font-size: .865rem; line-height: 1.50; color: #c2c0c7; }
.card-arrow {
  width: 39px;
  height: 39px;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  transition: color .26s, background-color .26s, border-color .26s, transform .32s var(--ease-out);
}
.service-card:hover .card-arrow { color: var(--ink); border-color: var(--lime); background: var(--lime); transform: rotate(10deg); }

.app-section { background: #141319; }
.app-layout { display: grid; grid-template-columns: .94fr 1.06fr; gap: clamp(34px, 5vw, 80px); align-items: center; }
.app-copy .section-label { color: var(--lime); }
.app-copy h2 { margin-bottom: 31px; }
.app-description { max-width: 360px; margin-bottom: 24px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.store-links { display: flex; flex-wrap: wrap; gap: 8px; }
.store-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 1 164px;
  min-height: 59px;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #ffffff2e;
  border-radius: 8px;
  background: #ffffff07;
  transition: background-color .25s, border-color .25s;
}
.store-link:hover { border-color: var(--lime); background: #e3f50318; }
.store-link small, .store-link strong { display: block; }
.store-link small { color: var(--muted); font-size: .67rem; }
.store-link strong { margin-top: 2px; font-size: 1.025rem; font-weight: 720; letter-spacing: -.035em; }
.store-link .icon { font-size: 18px; color: var(--lime); }
.app-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: clamp(465px, 45vw, 650px);
  overflow: hidden;
  overflow: clip;
  border: 1px solid #ffffff27;
  border-radius: 23px;
  background: radial-gradient(ellipse at 67% 43%, #373b1f 0%, #25281c 23%, #191a19 55%, #19181e 83%);
}
.stage-lines {
  position: absolute;
  z-index: -1;
  inset: -24%;
  transform: rotate(-35deg) scale(1.2);
  background: repeating-linear-gradient(90deg, transparent 0 53px, #e3f50325 54px, transparent 55px 70px),
              linear-gradient(90deg, transparent 43.7%, #e3f5033a 43.8%, transparent 44% 46%, #e3f503 46.1%, transparent 46.35%);
  mask-image: radial-gradient(ellipse at center, black 2%, #0008 50%, transparent 75%);
}
.stage-brand {
  position: absolute;
  z-index: -1;
  width: 58%;
  right: -1%;
  top: 14%;
  transform: rotate(-12deg);
  opacity: .25;
  filter: drop-shadow(0 0 48px #e3f50354);
}
.device {
  width: clamp(201px, 18.2vw, 277px);
  aspect-ratio: 600/1220;
  transform: translateY(var(--device-offset, 0px)) rotate(-10deg);
  filter: drop-shadow(19px 26px 21px #000a);
}
.device img { width: 100%; height: 100%; object-fit: contain; }

.drivers { padding-block: clamp(65px, 7vw, 106px) 0; }
.driver-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 455px;
  overflow: hidden;
  overflow: clip;
  border-radius: 22px;
  background: var(--lime);
}
.driver-copy { padding: clamp(29px, 4.25vw, 70px); align-self: center; }
.driver-copy .section-label { color: #343b00; }
.driver-copy h2 { font-size: clamp(3rem, 5.2vw, 6.05rem); }
.driver-copy > p:not(.section-label) { max-width: 400px; margin-top: 21px; color: #272b08; font-size: 1rem; line-height: 1.53; }
.driver-copy .button { margin-top: 25px; }
.driver-picture { position: relative; min-height: 100%; overflow: hidden; overflow: clip; }
.driver-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 48%; }
.driver-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 0; margin: 26px 0 0; }
.driver-steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 13px; padding: 20px 8px 0 0; border-top: 1px solid #1615132e; }
.driver-steps li > span { font-size: .72rem; line-height: 1.6; font-weight: 780; color: #4d4e36; }
.driver-steps h3 { font-size: 1rem; line-height: 1.3; font-weight: 710; letter-spacing: -.027em; }
.driver-steps p { margin-top: 6px; font-size: .86rem; line-height: 1.48; color: #555358; }

.faq { padding-block: clamp(76px, 9vw, 140px); }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 5vw, 70px); align-items: start; }
.faq-heading h2 { margin-bottom: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding-block: 2px; font-size: .89rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { font-size: 17px; transition: transform .3s var(--ease-out); }
.faq-list details { border-top: 1px solid #16151336; }
.faq-list details:last-child { border-bottom: 1px solid #16151336; }
.faq-list summary { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 17px; padding: 17px 1px; font-size: 1rem; font-weight: 670; line-height: 1.35; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] summary { color: #3a4100; }
.faq-list p { max-width: 560px; padding: 0 38px 20px 1px; font-size: .93rem; line-height: 1.6; color: #4e4d52; }
.faq-icon { position: relative; flex: 0 0 31px; height: 31px; border: 1px solid #16151340; border-radius: 50%; transition: background-color .25s, border-color .25s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; transform: translate(-50%, -50%); background: currentColor; border-radius: 1px; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .27s var(--ease-out); }
.faq-list details[open] .faq-icon { background: var(--lime); border-color: var(--lime); }
.faq-list details[open] .faq-icon::after { transform: translate(-50%, -50%); }

.site-footer {
  padding-top: clamp(30px, 4.5vw, 64px);
  background: radial-gradient(ellipse at 93% 0%, #2a2d16 0%, transparent 43%), var(--ink);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px clamp(20px, 3vw, 42px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: linear-gradient(110deg, #201f25 31%, #22241a);
}
.footer-top .brand { width: clamp(112px, 15vw, 158px); }
.footer-download { gap: 26px; }
.footer-download .footer-icon, .footer-back .footer-icon { transition: transform .25s var(--ease-out); }
.footer-download:hover .footer-icon { transform: translateY(2px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr .76fr 1.08fr;
  gap: 0 clamp(18px, 3vw, 46px);
  padding-block: 32px 35px;
}
.footer-group { min-width: 0; }
.footer-group + .footer-group { padding-left: clamp(18px, 3vw, 46px); border-left: 1px solid var(--rule); }
.footer-grid h2 {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.footer-link, .footer-address {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 37px;
  width: fit-content;
  max-width: 100%;
  font-size: .875rem;
  font-style: normal;
  line-height: 1.5;
}
.footer-link { border-radius: 4px; transition: color .2s; }
.footer-link:hover, .footer-back:hover { color: var(--lime); }
.footer-link > .footer-icon { width: 18px; height: 18px; color: var(--lime); }
.contact-icon {
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  height: 35px;
  border: 1px solid #e3f50328;
  border-radius: 8px;
  background: #e3f5030b;
  color: var(--lime);
}
.contact-icon .footer-icon { width: 17px; height: 17px; }
.contact-phone { min-height: 43px; font-size: 1.1rem; font-weight: 730; letter-spacing: -.025em; }
.footer-address { align-items: start; margin-top: 8px; color: var(--muted); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 16px 22px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .75rem;
}
.footer-back {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  gap: 8px;
  padding-inline: 10px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--white);
  font-weight: 600;
  transition: color .2s, border-color .2s;
}
.footer-back .footer-icon { width: 16px; height: 16px; }
.footer-back:hover { border-color: #e3f50365; }
.footer-back:hover .footer-icon { transform: translateY(-2px); }

.join-dialog {
  position: fixed;
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 29px;
  border: 0;
  border-radius: 19px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  box-shadow: 0 25px 90px #0008;
}
.join-dialog::backdrop { background: #0e0d12c9; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 14px; top: 14px; border-color: #26252b32; }
.dialog-close:hover { background: #15141612; }
.dialog-logo { border-radius: 11px; margin-bottom: 15px; }
.join-dialog h2 { max-width: 340px; font-size: clamp(1.55rem, 5vw, 2rem); line-height: 1.1; letter-spacing: -.065em; }
.join-dialog p { margin-top: 10px; color: #4f4e53; line-height: 1.55; }
.join-dialog .store-links { margin-block: 21px 18px; }
.join-dialog .store-link { background: var(--ink); color: var(--white); }
.join-dialog .store-link:hover { background: #2b2b1b; }

@media (prefers-reduced-motion: no-preference) {
  .hero-description, .hero-actions { animation: hero-arrive .8s var(--ease-out) both; }
  .hero-line > span { animation: hero-line-in 1s var(--ease-out) both .08s; }
  .hero-line + .hero-line > span { animation-delay: .17s; }
  .hero-description { animation-delay: .26s; }
  .hero-actions { animation-delay: .34s; }
  .hero-picture img { animation: hero-picture-in 1.5s var(--ease-out) both; }
  .reveal { transition: opacity .68s var(--ease-out), translate .82s var(--ease-out); transition-delay: var(--delay, 0ms); }
  .reveal.is-pending:not(:focus-within):not(:target) { opacity: 0; translate: 0 29px; }
  .service-card:nth-child(2) { --delay: 75ms; }
  .service-card:nth-child(3) { --delay: 150ms; }
  .app-stage { --delay: 100ms; }
  .join-dialog[open] { animation: dialog-in .32s var(--ease-out) both; }

  @keyframes hero-arrive { from { opacity: 0; translate: 0 13px; } to { opacity: 1; translate: 0; } }
  @keyframes hero-line-in { from { opacity: .25; translate: 0 105%; } to { opacity: 1; translate: 0; } }
  @keyframes hero-picture-in { from { scale: 1.055; filter: brightness(.77); } to { scale: 1; filter: brightness(1); } }
  @keyframes dialog-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0; } }
}

@media (max-width: 1080px) {
  .service-card-body { grid-template-columns: 1fr 33px; gap: 7px; }
  .card-arrow { width: 33px; height: 33px; font-size: 19px; }
  .driver-card { min-height: 390px; }
}

@media (max-width: 850px) {
  .hero h1 { font-size: clamp(4.3rem, 9.6vw, 6rem); }
  .header-inner { gap: 12px; }
  .header-inner .brand { width: 113px; }
  .main-nav { gap: 2px; padding: 3px; }
  .main-nav a { gap: 6px; padding-inline: 8px; }
  .button-header { gap: 8px; padding-inline: 12px; }
  .service-grid { gap: 9px; }
  .service-card { min-height: 284px; padding: 13px; border-radius: 14px; }
  .service-card-icon { width: 35px; height: 35px; }
  .service-card p { font-size: .79rem; }
  .service-card h3 { font-size: clamp(1.2rem, 2.65vw, 1.5rem); }
  .service-card-body { grid-template-columns: 1fr; }
  .card-arrow { position: absolute; right: 13px; top: 13px; }
}

@media (max-width: 700px) {
  :root { --header-height: 62px; --gutter: 20px; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .header-inner .brand { width: clamp(82px, 26vw, 106px); }
  .button-header { grid-column: 2; grid-row: 1; gap: 7px; padding-inline: 9px; }
  .menu-toggle { grid-row: 1; grid-column: 3; }
  .main-nav { grid-column: 1 / -1; flex-wrap: wrap; margin-bottom: 8px; }
  .has-menu .main-nav {
    position: absolute;
    inset: calc(100% + 7px) var(--gutter) auto;
    display: none;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 6px;
    background: #1a191e;
    box-shadow: 0 10px 28px #0007;
  }
  .has-menu .main-nav.is-open { display: flex; }
  .has-menu .main-nav a { gap: 11px; min-height: 48px; padding-inline: 12px; font-size: .95rem; }
  .hero { min-height: 665px; align-items: start; }
  .hero-picture { inset: auto 0 0; height: 77%; }
  .hero-picture img { object-position: center 60%; height: 100%; transform: none; }
  .hero-overlay { background: linear-gradient(180deg, #111015 26%, #111015 30%, #111015cd 44%, #11101524 72%, #11101517 100%); }
  .hero-inner { padding-block: 46px 286px; }
  .hero h1 { font-size: clamp(2.9rem, 12.35vw, 5.9rem); }
  .hero-description { font-size: .96rem; margin-top: 19px; line-height: 1.48; max-width: 330px; }
  .hero-actions { gap: 7px; margin-top: 19px; }
  .hero-actions .button { min-height: 47px; gap: 8px; padding-inline: 10px; font-size: .795rem; }
  .hero-actions .icon { font-size: 17px; }
  .service-bar a { grid-template-columns: auto 1fr; gap: 6px; padding: 15px 7px; font-size: clamp(.625rem, 2.15vw, .82rem); }
  .service-bar-icon { font-size: 16px; }
  .service-bar-arrow { display: none; }
  .services, .app-section { padding-block: 66px; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .section-label { margin-bottom: 14px; }
  main h2 { font-size: clamp(2.75rem, 9.1vw, 4.8rem); }
  .section-intro { margin: 0; max-width: 355px; font-size: .95rem; }
  .service-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-card { min-height: clamp(246px, 56vw, 355px); padding: 16px; border-radius: 14px; }
  .service-card-image { height: 100%; object-position: center 57%; }
  .service-card::before { background: linear-gradient(180deg, #13121735 0%, transparent 37%, #13121712 47%, #131217f8 96%); }
  .service-card h3 { font-size: 1.62rem; }
  .service-card p { font-size: .84rem; margin-top: 5px; }
  .card-arrow { right: 15px; top: auto; bottom: 15px; }
  .service-card-body { padding-right: 39px; }
  .app-layout { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .app-copy h2 { margin-bottom: 23px; }
  .app-stage { min-height: clamp(342px, 104vw, 520px); }
  .device { width: clamp(159px, 46vw, 225px); }
  .driver-card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .driver-copy { padding: 26px; }
  .driver-copy h2 { font-size: clamp(2.7rem, 9.9vw, 4.8rem); }
  .driver-copy > p:not(.section-label) { margin-top: 15px; font-size: .94rem; }
  .driver-picture { min-height: clamp(240px, 68vw, 360px); }
  .driver-picture img { object-position: center 43%; }
  .driver-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .driver-steps li { padding-top: 12px; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-heading h2 { margin-bottom: 12px; }
  .faq-heading h2 br { display: none; }
  .footer-top { padding: 14px; border-radius: 12px; }
  .footer-download { gap: 9px; padding-inline: 10px; min-height: 44px; font-size: .8rem; }
  .footer-download .footer-icon { width: 17px; height: 17px; }
  .footer-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px 16px; padding-block: 23px; }
  .footer-grid .footer-contact { grid-column: 1 / -1; padding-bottom: 17px; border-bottom: 1px solid var(--rule); }
  .footer-group + .footer-group { padding-left: 0; border-left: 0; }
  .footer-link { min-height: 44px; gap: 7px; }
  .contact-phone, .footer-back { min-height: 44px; }
}

@media (max-width: 390px) {
  :root { --gutter: 16px; }
  .hero { min-height: 620px; }
  .hero-inner { padding-bottom: 258px; }
  .hero-actions { display: grid; width: min(100%, 236px); }
  .hero-picture { height: min(74%, 125vw); }
  .hero-overlay { background: linear-gradient(180deg, #111015 29%, #111015e8 43%, #11101547 64%, #11101515 87%); }
  .store-link { flex-basis: calc(50% - 4px); }
  .join-dialog { padding: 24px 16px; }
  .join-dialog .store-link { gap: 5px; padding-inline: 9px; }
  .join-dialog .store-link strong { font-size: .93rem; }
  .footer-top { gap: 8px; padding: 12px; }
  .footer-top .brand { width: 100px; }
  .footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .footer-grid .footer-contact { grid-column: auto; padding-bottom: 0; border-bottom: 0; }
  .footer-group + .footer-group { padding-top: 16px; border-top: 1px solid var(--rule); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-picture img { transform: none; }
  .device { transform: rotate(-10deg); }
}