/* Лендинг YP VPN (v0.44) — ретро-футуризм «светлой аэрокосмической эпохи».
   Палитра — токены styles.css (логотип): бумажно-небесный фон, navy-чернила, сине-голубой
   градиент. Три голоса типографики: Unbounded (заголовки, вариативный 200–900),
   системный (текст), моноширинный (телеметрия/подписи карты).
   Сигнатура: контурное поле + маршрут RU→NL, прочерчивающий себя (CSS-анимации; при
   prefers-reduced-motion всё статично). Инлайн-стилей нет — строгий CSP. */

@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(/assets/unbounded-cyr.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(/assets/unbounded-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}

.lp-body{--display:"Unbounded",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* Тёмная футуристичная тема — переопределяем токены ТОЛЬКО в scope .lp-body
     (кабинет/админ остаются светлыми). */
  --bg:#060d1a; --surface:#0d1a2e; --surface-2:#0b1626; --elevated:#10203a;
  --border:rgba(126,166,214,.16); --border-strong:rgba(126,166,214,.30);
  --text:#eaf2fb; --muted:#9db2cc; --faint:#6f86a3;
  --accent:#2f8bff; --accent-2:#62c6f2; --accent-deep:#bfe0ff;
  --accent-soft:rgba(47,139,255,.16); --danger:#ff7a7a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
  --shadow-soft:0 22px 60px rgba(0,0,0,.55);
  --line:rgba(126,166,214,.12);
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(47,139,255,.20), transparent 60%),
    radial-gradient(820px 480px at 6% 4%, rgba(98,198,242,.10), transparent 58%),
    #060d1a;}

/* Тёмные переопределения общих компонентов styles.css (они рассчитаны на светлую тему):
   поля ввода и вторичная кнопка иначе дают нечитаемый светлый текст на светлом фоне. */
.lp-body input{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border-strong)}
.lp-body input::placeholder{color:var(--faint)}
.lp-body .btn.secondary,.lp-body button.secondary{background:rgba(255,255,255,.07); color:var(--text); border-color:var(--border-strong)}
.lp-body .btn.secondary:hover{background:rgba(255,255,255,.12)}

/* ── Анимированный фон (constellation) ── */
#bgFx{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
.lp-body > .skip-link,
.lp-body > #aria-announce,
.lp-body > header,
.lp-body > main,
.lp-body > footer{position:relative; z-index:1}

/* ── Каркас ── */
.lp-wrap{max-width:1080px; margin:0 auto; padding:0 var(--space-4)}
main.lp{padding:0 0 var(--space-6); max-width:none}
.lp-top{padding-top:calc(env(safe-area-inset-top) + var(--space-2))}
.lp-body header.top.lp-top{
  background:#060d1a;
  border-bottom:1px solid rgba(126,166,214,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.top-row{display:flex; align-items:center; gap:var(--space-4)}
.lp-nav{display:flex; gap:var(--space-4); margin-right:auto}
.lp-nav a{color:var(--muted); text-decoration:none; font-weight:700; font-size:.92rem; min-height:44px; display:inline-flex; align-items:center}
.lp-nav a:hover{color:var(--accent-deep)}
.lp-top-cta{display:flex; gap:var(--space-2)}
.lp-top .brand{margin-right:0}
.lp-top .btn.secondary{background:rgba(255,255,255,.07); color:var(--text); border-color:rgba(191,224,255,.32)}
.lp-top .btn.secondary:hover{background:rgba(255,255,255,.12); border-color:rgba(191,224,255,.48)}
.lp-top .btn.primary{box-shadow:0 10px 22px rgba(47,139,255,.28)}

/* ── Hero: контурное поле + маршрут ── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.contours{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.contours .c,.contours .w{fill:none; stroke:var(--line); stroke-width:1.1}
.contours .c-in{stroke:rgba(18,104,214,.4); stroke-width:1.3}
.contours .w{stroke:rgba(126,166,214,.16); stroke-width:1}
.contours .waves{animation:waveDrift 120s ease-in-out infinite alternate; transform-origin:50% 50%}
.c-field{animation:drift 90s ease-in-out infinite alternate; transform-origin:50% 50%}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14px,8px,0) scale(1.025)}}
@keyframes waveDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-10px,0)}}

.route-under{fill:none; stroke:rgba(47,139,255,.22); stroke-width:7; stroke-linecap:round; filter:blur(3px)}
.route{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 5px rgba(47,139,255,.6));
  animation:draw 2.6s .3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* Передний слой маркеров маршрута: над текстом hero, курсор проходит насквозь.
   Кольца .ring оживляет landing.js (idle-пульс + реакция на курсор); без JS — статичный ореол. */
.route-fx{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.route-fx .core{fill:#eaf7ff; filter:drop-shadow(0 0 5px rgba(98,198,242,.9))}
.route-fx .ring{fill:none; stroke:var(--accent-2); stroke-width:1.6; stroke-opacity:.5}
.pt-hex{fill:#eaf7ff; stroke:var(--accent-2); stroke-width:2; filter:drop-shadow(0 0 6px rgba(98,198,242,.7))}
.map-t{font-family:var(--mono); font-size:13px; letter-spacing:.14em; fill:var(--muted); text-anchor:middle}
.route-dot{fill:var(--accent-2); stroke:#fff; stroke-width:2; visibility:hidden}
@supports (offset-path:path("M0,0 L1,1")){
  .route-dot{visibility:visible;
    offset-path:path("M185,410 C330,398 500,362 635,312 C780,256 895,202 990,155");
    offset-distance:0%; offset-rotate:0deg; cx:0; cy:0;
    animation:travel 2.6s .3s cubic-bezier(.6,0,.2,1) forwards}
}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}

.hero-inner{position:relative; z-index:1; padding:clamp(3.2rem,9vw,6.5rem) var(--space-4) clamp(3rem,8vw,5.5rem)}
.eyebrow{font-family:var(--mono); font-size:.8rem; letter-spacing:.22em; color:var(--accent-deep);
  margin:0 0 var(--space-4); padding-left:2px}
.hero-h{font-family:var(--display); font-weight:640; font-size:clamp(1.9rem,5.4vw,3.6rem);
  line-height:1.12; letter-spacing:-.01em; margin:0 0 var(--space-4); max-width:15ch}
.grad{background:linear-gradient(92deg,var(--accent) 10%,var(--accent-2) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(1rem,1.6vw,1.18rem); color:var(--muted); max-width:52ch; margin:0 0 var(--space-5)}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-3); align-items:center}
.btn.xl,button.xl{min-height:56px; padding:0 var(--space-6); font-size:1.04rem; font-weight:700}
.tg-btn{display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; padding:0 !important;
  background:rgba(0,136,204,.12); color:#62c6f2; flex-shrink:0;
  border:1px solid rgba(98,198,242,.64);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 24px rgba(0,136,204,.12)}
.tg-btn:hover{background:#0088cc; border-color:#62c6f2; color:#fff}

/* ── Телеметрия ── */
.telemetry{margin-top:calc(-1 * var(--space-5)); position:relative; z-index:2}
.telemetry{background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--space-3) var(--space-4); backdrop-filter:blur(10px)}
.tele-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.tele-title{font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; color:var(--muted); font-weight:700}
.tele-upd{font-family:var(--mono); font-size:.74rem; color:var(--faint)}
.tele-grid{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-2)}
.tele-item{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.86rem; color:var(--text)}
.tele-dot{width:9px; height:9px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.tele-dot.ok{background:var(--ok); box-shadow:0 0 0 4px rgba(19,128,92,.14)}
.tele-dot.warn{background:var(--warn); box-shadow:0 0 0 4px rgba(152,106,0,.14)}
.tele-dot.bad{background:var(--danger); box-shadow:0 0 0 4px rgba(199,53,53,.14)}
.tele-dot.muted{background:var(--faint)}

/* ── Секции ── */
.lp-h2{font-family:var(--display); font-weight:520; font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--text); text-transform:none; letter-spacing:0; margin:var(--space-6) 0 var(--space-4)}
.features,.pricing,.steps,.faq{margin-top:var(--space-5)}

.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-3)}
.feat{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); box-shadow:var(--shadow); backdrop-filter:blur(8px); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.feat:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:rgba(98,198,242,.4)}
.feat-tag{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  color:var(--accent-deep); background:var(--accent-soft); border:1px solid rgba(18,104,214,.22);
  border-radius:4px; padding:.24rem .5rem; margin-bottom:var(--space-3)}
.feat h3{font-family:var(--display); font-weight:500; font-size:1.02rem; margin:0 0 var(--space-2); line-height:1.3}
.feat p{color:var(--muted); font-size:.94rem; margin:0}

.plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-3)}
.plan{background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-5) var(--space-4); box-shadow:var(--shadow); backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:var(--space-2)}
.plan-hi{border-color:rgba(98,198,242,.45); box-shadow:var(--shadow-soft), 0 0 0 1px rgba(98,198,242,.2); position:relative}
.plan-tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--muted)}
.plan h3{font-family:var(--display); font-weight:500; font-size:1.06rem; margin:0}
.plan-price{font-family:var(--display); font-weight:640; font-size:1.5rem; color:var(--accent-deep); margin:0}
.plan-price small{font-family:var(--mono); font-size:.72rem; font-weight:400; color:var(--faint); letter-spacing:.08em}
.plan p{color:var(--muted); font-size:.92rem; margin:0 0 var(--space-2)}
.plan .btn{margin-top:auto}
.plans-note{color:var(--faint); font-size:.9rem; margin-top:var(--space-3)}

.step-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-3); counter-reset:none}
.step-list li{display:flex; gap:var(--space-3); align-items:flex-start; background:rgba(255,255,255,.035);
  border:1px dashed var(--border-strong); border-radius:var(--radius); padding:var(--space-4); backdrop-filter:blur(6px)}
.step-n{font-family:var(--mono); font-size:.9rem; font-weight:700; color:var(--accent);
  border:1px solid rgba(18,104,214,.3); border-radius:4px; padding:.2rem .45rem; flex:0 0 auto}
.step-list h3{font-family:var(--display); font-weight:500; font-size:1rem; margin:0 0 .3rem}
.step-list p{color:var(--muted); font-size:.92rem; margin:0}

.lp-faq{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:var(--space-2); box-shadow:none; backdrop-filter:blur(6px)}
.lp-faq summary{cursor:pointer; padding:var(--space-4); font-weight:700; list-style:none; position:relative; padding-right:2.6rem; min-height:var(--tap); display:flex; align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; position:absolute; right:var(--space-4); font-family:var(--mono);
  font-size:1.2rem; color:var(--accent); transition:transform .18s ease}
.lp-faq[open] summary::after{transform:rotate(45deg)}
.lp-faq p{padding:0 var(--space-4) var(--space-4); margin:0; color:var(--muted)}

/* ── Футер ── */
.lp-foot{border-top:1px solid var(--border); margin-top:var(--space-6); padding:var(--space-5) 0 calc(var(--space-5) + env(safe-area-inset-bottom))}
.foot-row{display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; align-items:center}
.coords{font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; color:var(--faint)}
.foot-nav{display:flex; gap:var(--space-4); flex-wrap:wrap}
.foot-nav a{color:var(--muted); font-size:.9rem; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.foot-nav a:hover{color:var(--accent-deep)}

/* ── Вход / регистрация / verify ── */
.auth-hero{min-height:calc(100vh - 120px); display:flex; align-items:flex-start; border-bottom:0}
.auth-wrap{width:100%; display:flex; justify-content:center; padding-top:clamp(2rem,7vw,4.5rem); padding-bottom:var(--space-6)}
.auth-card{position:relative; z-index:1; width:100%; max-width:420px; background:rgba(16,30,54,.78);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:var(--space-5); backdrop-filter:blur(14px)}
.auth-h{font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0 0 var(--space-4)}
.auth-form{display:grid; gap:var(--space-3)}
.auth-err{color:var(--danger); font-size:.92rem; margin:0}
.auth-note{color:var(--faint); font-size:.86rem; margin:var(--space-3) 0 0}
.auth-alt{color:var(--muted); font-size:.92rem; margin:var(--space-3) 0 0}
.w100{width:100%}

/* ── Появление секций: контент виден без JS; landing.js добавляет <html class="anim"> и
   Motion поднимает .reveal из этого состояния (при reduced-motion класс не ставится). ── */
.anim .reveal{opacity:0; transform:translateY(18px)}

/* ── Компактные экраны ── */
@media (max-width:760px){
  .lp-nav{display:none}
  .lp-top-cta{margin-left:auto}
  .lp-top-reg{display:none}
  .hero-inner{padding-top:2.6rem}
  .map-t{font-size:15px}
  .telemetry{margin-top:var(--space-3)}
  .foot-row{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .c-field,.route,.route-dot{animation:none}
  .route{stroke-dashoffset:0}
  .feat,.lp-faq summary::after{transition:none}
  #bgFx{display:none}
}