/* В сети — vseti.io
   One stylesheet for every page. No @import, no external font, no third-party request:
   Russian ISPs throttle Cloudflare-fronted assets to roughly the first 16 KB, and this
   page is often the first thing a referred user loads on a bad network. Everything it
   needs must arrive in two requests.

   Type is set in the system serif for display and the system sans for text. Both stacks
   have real Cyrillic on every platform we ship to, which a webfont would have to be
   downloaded to match. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Light is the base. Every colour is defined here, so a token can never be
     defined only inside a media query. */
  --paper:        #f6f4ef;
  --paper-2:      #efece4;
  --surface:      #ffffff;
  --ink:          #16191b;
  --ink-2:        #3c4346;
  --muted:        #6a7276;
  --line:         #e2ddd2;
  --line-2:       #cec8b9;
  --signal:       #0d7a4e;   /* text-weight green, 4.9:1 on paper */
  --signal-dot:   #17a768;   /* the status dot: brighter than text ever should be */
  --signal-soft:  #e6f2ea;
  --amber:        #b5760f;
  --amber-dot:    #e0961d;
  --shadow:       0 1px 2px rgba(22, 25, 27, .05), 0 8px 24px -12px rgba(22, 25, 27, .16);

  --f-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale, ratio ~1.25 at 360px widening to ~1.33 at 1200px. */
  --t--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-0:  clamp(1rem, .97rem + .14vw, 1.0625rem);
  --t-1:  clamp(1.125rem, 1.07rem + .26vw, 1.3125rem);
  --t-2:  clamp(1.35rem, 1.24rem + .5vw, 1.75rem);
  --t-3:  clamp(1.65rem, 1.44rem + .95vw, 2.4rem);
  --t-4:  clamp(2.05rem, 1.6rem + 2vw, 3.4rem);
  --t-5:  clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: clamp(64px, 9vw, 112px);
  --sp-10: clamp(88px, 12vw, 160px);

  --radius: 14px;
  --radius-sm: 9px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #101414;
    --paper-2:     #0b0e0e;
    --surface:     #171c1c;
    --ink:         #eceae3;
    --ink-2:       #c3c8c5;
    --muted:       #949c9a;
    --line:        #252c2c;
    --line-2:      #364040;
    --signal:      #4fd39a;
    --signal-dot:  #35c489;
    --signal-soft: #16241e;
    --amber:       #e0a94a;
    --amber-dot:   #d9931f;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-soft); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  z-index: 20;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: var(--sp-9); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper-2); }

.measure { max-width: var(--measure); }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lede {
  font-size: var(--t-1);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- header */

.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal-dot);
  transform: translateY(-1px);
}

.langs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t--1);
}
.langs a, .langs span {
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: .04em;
}
.langs [aria-current] {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* ---------------------------------------------------------------- hero */

.hero { padding-block: var(--sp-10) var(--sp-8); }

.hero h1 {
  font-size: var(--t-5);
  max-width: 15ch;
  letter-spacing: -.03em;
}

.hero__sub {
  margin-top: var(--sp-5);
  font-size: var(--t-2);
  font-family: var(--f-display);
  color: var(--ink-2);
  max-width: 30ch;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__note {
  margin-top: var(--sp-6);
  max-width: 46ch;
  color: var(--muted);
}

.hero__cta {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 550;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: var(--surface); opacity: 1; }

.hero__aside {
  font-size: var(--t--1);
  color: var(--muted);
}

/* ---------------------------------------------------------------- routes */

.routes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.route {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow);
}

.route__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.route__title { font-weight: 600; font-size: var(--t-0); }
.route__tag {
  font-size: var(--t--1);
  color: var(--muted);
  white-space: nowrap;
}

.path {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--t--1);
}
.path__node {
  color: var(--ink-2);
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
}
.path__node--start { border-style: dashed; color: var(--muted); }
.path__link {
  flex: 1;
  height: 1px;
  background: var(--line-2);
  min-width: 14px;
  position: relative;
}
.path__link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

.route--via .path__link { background: var(--signal); }
.route--via .path__link::after { border-color: var(--signal); }
.route--via .path__node--hop {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-soft);
}

.route__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--t--1);
}

@media (max-width: 640px) {
  .path { flex-direction: column; align-items: flex-start; gap: 0; }
  .path__link {
    width: 1px;
    height: 20px;
    flex: none;
    min-width: 0;
    margin-left: 18px;
  }
  .path__link::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); }
}

/* ---------------------------------------------------------------- two-up */

.cols {
  display: grid;
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
}
@media (min-width: 860px) {
  .cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.stack > * + * { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------- the button demo */

.demo {
  display: flex;
  justify-content: center;
}

.phone {
  width: min(300px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 30px;
  background: var(--surface);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow);
  text-align: center;
}

.phone__label {
  font-size: var(--t--1);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 66px;
  height: 66px;
  margin: var(--sp-6) auto var(--sp-5);
  border-radius: 50%;
  background: var(--line-2);
  position: relative;
  transition: background-color .35s ease;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .35s ease;
}
.phone[data-state="connecting"] .dot { background: var(--amber-dot); }
.phone[data-state="connecting"] .dot::after {
  border-color: color-mix(in srgb, var(--amber-dot) 45%, transparent);
  animation: ring 1.5s ease-out infinite;
}
.phone[data-state="on"] .dot { background: var(--signal-dot); }
.phone[data-state="on"] .dot::after {
  border-color: color-mix(in srgb, var(--signal-dot) 40%, transparent);
}

@keyframes ring {
  0%   { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.phone__state {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
  min-height: 1.3em;
}
.phone__hint {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  min-height: 2.6em;
}

.switch {
  margin-top: var(--sp-5);
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.switch:hover { background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot, .dot::after { transition: none; animation: none; }
}

/* ---------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.step { counter-increment: step; }
.step__n {
  font-family: var(--f-display);
  font-size: var(--t-1);
  color: var(--signal);
  display: block;
  margin-bottom: var(--sp-3);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--t-1); margin-bottom: var(--sp-3); }
.step p { color: var(--muted); font-size: var(--t--1); line-height: 1.65; }

/* the system permission sheet, drawn rather than screenshotted — this is where
   first-run users stop, so they need to recognise it before they meet it */
.sheet {
  margin-top: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  max-width: 320px;
  box-shadow: var(--shadow);
}
.sheet__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
}
.sheet__title {
  font-weight: 600;
  font-size: var(--t-0);
  line-height: 1.3;
}
.sheet__text {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  line-height: 1.45;
}
.sheet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.sheet__actions span {
  padding: 11px 8px;
  text-align: center;
  font-size: var(--t--1);
  color: var(--muted);
}
.sheet__actions span + span {
  border-left: 1px solid var(--line);
  color: var(--signal);
  font-weight: 600;
}
.sheet__caption {
  margin-top: var(--sp-3);
  font-size: var(--t--1);
  color: var(--muted);
}

/* ---------------------------------------------------------------- pricing */

.plans {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.plan--lead { border-color: var(--line-2); }

.plan__name {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
}
.plan__price {
  margin-top: var(--sp-4);
  font-size: var(--t-3);
  font-family: var(--f-display);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.plan__price small {
  font-family: var(--f-text);
  font-size: var(--t--1);
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.plan__alt {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.plan li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  font-size: var(--t--1);
  color: var(--ink-2);
  line-height: 1.55;
}
.plan li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-dot);
  margin-top: .52em;
}
.plan li.is-off { color: var(--muted); }
.plan li.is-off::before { background: none; border: 1px solid var(--line-2); }

.plan__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--t--1);
  color: var(--muted);
}

.note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- faq */

.faq { margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: var(--sp-5) 34px var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p {
  padding: 0 var(--sp-6) var(--sp-5) 0;
  color: var(--muted);
  max-width: 68ch;
  font-size: var(--t--1);
  line-height: 1.7;
}
.faq p + p { padding-top: 0; margin-top: calc(var(--sp-3) * -1); }

/* ---------------------------------------------------------------- contact */

.contact {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 760px) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--surface);
}
.card h3 { font-size: var(--t-1); margin-bottom: var(--sp-2); }
.card p { font-size: var(--t--1); color: var(--muted); }
.card a { font-weight: 550; }

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  font-size: var(--t--1);
  color: var(--muted);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.foot nav a { display: inline-block; padding-block: 9px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot__legal { margin-top: var(--sp-5); max-width: 62ch; line-height: 1.6; }

/* ---------------------------------------------------------------- legal pages */

.doc { padding-block: var(--sp-8) var(--sp-9); }
/* "Конфиденциальность" is one 18-character word and it is wider than a 320px phone at this
   size. Nothing else on the site has a token that long, so the page looked fine everywhere
   except the one URL Apple's reviewer opens on a device: the whole document picked up a
   horizontal scroll from a single heading. Let it break rather than push the viewport. */
.doc h1 { font-size: var(--t-4); max-width: 20ch; overflow-wrap: break-word; hyphens: auto; }
.doc__meta { margin-top: var(--sp-4); color: var(--muted); font-size: var(--t--1); }
.doc h2 {
  font-size: var(--t-2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  max-width: 26ch;
}
.doc h3 {
  font-size: var(--t-1);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.doc p, .doc li { max-width: 68ch; color: var(--ink-2); line-height: 1.7; }
.doc p + p { margin-top: var(--sp-4); }
.doc ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.doc ul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
}
.doc ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
  margin-top: .62em;
}
.doc__toc {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.doc__toc ol {
  counter-reset: toc;
  display: grid;
  font-size: var(--t--1);
}
.doc__toc li { counter-increment: toc; }
.doc__toc a { padding-block: 7px; }
.doc__toc li::before {
  content: counter(toc) ". ";
  color: var(--muted);
}