/* Sign-in, sign-up and Telegram linking: the landing's light look, with the
   same dark story panel as the test-drive page. */
@font-face {
  font-family: "Geist AutoFlow";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform-static/landing-v2/assets/_vinext_fonts/geist-8ac0455e797f/geist-875ccdd4.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist AutoFlow";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform-static/landing-v2/assets/_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2") format("woff2");
  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;
}

:root {
  --ink: #313543;
  --ink-2: #4a4f5c;
  --muted: #737885;
  --line: rgba(49, 53, 67, .1);
  --line-strong: rgba(49, 53, 67, .18);
  --paper: #eceef1;
  --card: #f8f8f9;
  --soft: #e4e6ea;
  --navy: #2c303c;
  --navy-2: #363b49;
  --red: #ef3e2c;
  --red-dark: #d7301f;
  --red-soft: rgba(239, 62, 44, .1);
  --tg: #2aabee;
  --font: "Geist AutoFlow", Outfit, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; min-width: 320px; background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.au-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr); }

/* ---------- Story ---------- */
.au-story {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  padding: 34px clamp(28px, 4vw, 56px) 36px;
  background:
    radial-gradient(circle at 88% 12%, rgba(239, 62, 44, .26), transparent 34%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 58%, #252833 100%);
  color: #fff;
  isolation: isolate;
}
.au-story::before,
.au-story::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; pointer-events: none; }
.au-story::before { right: -260px; top: -200px; width: 640px; height: 640px; box-shadow: 0 0 0 80px rgba(255, 255, 255, .012), 0 0 0 160px rgba(255, 255, 255, .01); }
.au-story::after { right: -120px; top: -60px; width: 360px; height: 360px; border-color: rgba(239, 62, 44, .2); }
.au-brand { color: #fff; font: 800 24px/1 var(--font); letter-spacing: -.04em; text-decoration: none; }
.au-brand span { color: var(--red); }
.au-story-copy { margin-top: auto; }
.au-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 8px 13px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: #ffb3aa;
  font: 750 11px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.au-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(239, 62, 44, .2); }
.au-story h1 { margin: 0; max-width: 520px; font: 760 clamp(40px, 4.4vw, 60px)/.98 var(--font); letter-spacing: -.055em; }
.au-story h1 em { display: block; color: #ff6b57; font-style: normal; }
.au-lead { max-width: 460px; margin: 20px 0 0; color: #c5c8d0; font: 500 16px/1.6 var(--font); }
.au-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.au-points li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
}
.au-points span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .08); color: #fff; }
.au-points li:first-child span { background: var(--red); box-shadow: 0 10px 22px rgba(239, 62, 44, .3); }
.au-points svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-points strong { display: block; color: #fff; font: 700 16px/1.2 var(--font); }
.au-points small { display: block; margin-top: 3px; color: #9ea2ad; font: 500 13px/1.35 var(--font); }
.au-story-foot { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #9ea2ad; font: 500 12.5px/1.5 var(--font); }
.au-story-foot svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: #ff8d80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Form side ---------- */
.au-main { display: flex; min-width: 0; flex-direction: column; padding: 28px clamp(20px, 5vw, 72px) 40px; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-back, .au-help { color: var(--muted); font: 600 13px/1 var(--font); text-decoration: none; }
.au-back:hover, .au-help:hover { color: var(--ink); }
.au-help b { color: var(--ink); }
.au-card { width: min(500px, 100%); margin: auto; padding-top: 32px; }

.au-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.au-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: 700 14px/1 var(--font);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.au-switch button:hover { color: var(--ink); }
.au-switch button.is-active { background: var(--card); color: var(--ink); box-shadow: 0 6px 18px rgba(49, 53, 67, .1); }

.au-head { margin-top: 30px; }
.au-head p { margin: 0 0 10px; color: var(--red); font: 750 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.au-head h2 { margin: 0; color: var(--ink); font: 760 clamp(32px, 3.4vw, 42px)/1 var(--font); letter-spacing: -.05em; }
.au-head span { display: block; margin-top: 12px; color: var(--muted); font: 500 15px/1.5 var(--font); }

.au-notice { margin: 22px 0 0; padding: 13px 15px; border-radius: 14px; background: var(--red-soft); color: #b22a1c; font: 600 13.5px/1.45 var(--font); }

/* Telegram block */
.au-tg { margin-top: 26px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.au-tg-head { display: flex; align-items: center; gap: 12px; }
.au-tg-mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: rgba(42, 171, 238, .12); }
.au-tg-mark img { width: 22px; height: 22px; }
.au-tg-head strong { display: block; color: var(--ink); font: 700 15px/1.2 var(--font); }
.au-tg-head small { display: block; margin-top: 3px; color: var(--muted); font: 500 12.5px/1.35 var(--font); }
.au-widget { min-height: 48px; display: flex; align-items: center; margin-top: 16px; }
.au-widget iframe { max-width: 100%; }
.au-vpn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--ink-2);
  font: 500 12.5px/1.45 var(--font);
  transition: background .2s ease, color .2s ease;
}
.au-vpn svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.au-vpn b { color: var(--ink); }
.au-vpn.is-missing { background: var(--red-soft); color: #b22a1c; }
.au-vpn.is-missing b { color: #b22a1c; }
.au-tg-off { margin: 14px 0 0; color: var(--muted); font: 500 13px/1.5 var(--font); }

.au-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; color: var(--muted); font: 650 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.au-divider::before, .au-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

/* Email forms */
.au-form { display: grid; gap: 14px; margin-top: 20px; }
.au-form label { display: grid; gap: 8px; color: var(--ink-2); font: 700 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.au-form input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font: 500 16px/1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.au-form input::placeholder { color: #9ea2ad; }
.au-form input:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 4px rgba(49, 53, 67, .07); }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-primary {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  padding: 0 26px;
  border: 0;
  border-radius: 18px;
  background: var(--red);
  box-shadow: 0 16px 32px rgba(239, 62, 44, .26);
  color: #fff;
  font: 700 16px/1 var(--font);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.au-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.au-primary:focus-visible, .au-switch button:focus-visible { outline: 3px solid rgba(239, 62, 44, .35); outline-offset: 3px; }
.au-primary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.au-ghost {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font: 700 14px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.au-ghost:hover { background: var(--soft); }
.au-note { margin: 16px 0 0; color: var(--muted); font: 500 12.5px/1.5 var(--font); }
.au-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.au-note a:hover { color: var(--ink); }
.au-note b { color: var(--ink-2); }

/* Link page: who is signed in */
.au-account { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.au-account-dot { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #ff7a66, var(--red)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); }
.au-account b, .au-account small { display: block; }
.au-account b { color: var(--ink); font: 700 14px/1.2 var(--font); }
.au-account small { margin-top: 2px; color: var(--muted); font: 500 12px/1.3 var(--font); }
.au-account form { margin-left: auto; }
.au-account button { border: 0; background: none; color: var(--muted); font: 600 12.5px/1 var(--font); cursor: pointer; }
.au-account button:hover { color: var(--ink); }

@media (max-width: 980px) {
  .au-shell { grid-template-columns: 1fr; }
  .au-story { position: relative; height: auto; gap: 22px; padding: 22px 20px 26px; }
  .au-story-copy { margin-top: 14px; }
  .au-story h1 { font-size: 38px; }
  .au-lead { font-size: 15px; }
  .au-points, .au-story-foot { display: none; }
  .au-main { padding: 18px 16px 36px; }
  .au-card { padding-top: 8px; }
}
@media (max-width: 520px) {
  .au-row { grid-template-columns: 1fr; }
  .au-help { display: none; }
  .au-tg { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .au-primary, .au-switch button, .au-form input, .au-vpn { transition: none; }
}
