/* Top-Top — лендинг.
   Стиль: пастельное «мечтательное» небо, стеклянные карточки, орб с кольцами.

   ВАЖНО ПРО ПРОИЗВОДИТЕЛЬНОСТЬ (вывод из прошлого опыта проекта):
   `backdrop-filter: blur()` на карточках и `filter: blur()` на фоновых элементах
   заставляют браузер перерисовывать всё под ними каждый кадр — страница тормозила
   и могла не открыться вовсе. Здесь вместо размытия:
     - фон неба и свечение — два псевдоэлемента с radial-gradient,
     - карточки — полупрозрачный белый фон и мягкая тень, без blur.
   Визуально почти то же, нагрузки нет. */

:root{
  --sky-1:#cfe6ff;
  --sky-2:#e9f4ff;
  --field:#d8f0d2;

  --ink:#26314e;
  --ink-soft:#5a6684;
  --line:rgba(38,49,78,.12);

  --card:rgba(255,255,255,.74);
  --card-solid:#ffffff;

  --sun-1:#ffb865;
  --sun-2:#ff8f36;

  --blue:#4aa8ff;
  --green:#54c98a;
  --violet:#a97bff;
  --teal:#3fd0c9;

  --radius:20px;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 45%,var(--field) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* Небо и мягкое свечение — два слоя вместо десятков размытых элементов. */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(520px 300px at 80% 8%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(460px 260px at 12% 22%, rgba(255,255,255,.65), transparent 72%);
}
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(300px 300px at 88% 70%, rgba(255,184,101,.20), transparent 70%),
    radial-gradient(340px 340px at 8% 78%, rgba(169,123,255,.16), transparent 72%);
}

main,.topbar,.footer{position:relative; z-index:1}

a{color:#2f6fd0; text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.wrap.narrow{max-width:780px}
.center{text-align:center}
.muted{color:var(--ink-soft); font-size:14px}

/* ---------------- орб ---------------- */
.orb{position:relative; display:inline-block; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #fff 0%, #9fd8ff 30%, #7f9bff 62%, #b07bff 100%);
  box-shadow:0 0 18px rgba(120,170,255,.55), 0 0 40px rgba(169,123,255,.35);
}
.orb i{position:absolute; inset:-14%; border-radius:50%; border:1px solid rgba(255,255,255,.75); }
.orb i:nth-child(1){transform:rotate(0deg) scaleX(.55)}
.orb i:nth-child(2){transform:rotate(60deg) scaleX(.55)}
.orb i:nth-child(3){transform:rotate(120deg) scaleX(.55)}
.orb--small{width:26px; height:26px}
.orb--big{width:96px; height:96px; margin-bottom:22px}
@media (prefers-reduced-motion:no-preference){
  .orb i{animation:spin 14s linear infinite}
  .orb i:nth-child(2){animation-duration:18s}
  .orb i:nth-child(3){animation-duration:22s}
  @keyframes spin{from{transform:rotate(0) scaleX(.55)} to{transform:rotate(360deg) scaleX(.55)}}
}

/* ---------------- шапка ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:650; letter-spacing:.3px}
.brand:hover{text-decoration:none}
.nav{display:flex; gap:20px; margin-left:auto; font-size:15px}
.nav a{color:var(--ink-soft)}
.nav a:hover{color:var(--ink); text-decoration:none}
.lang{display:flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:3px; background:rgba(255,255,255,.6)}
.lang__btn{border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  padding:4px 11px; border-radius:999px; font-size:13px; font-weight:650}
.lang__btn.is-on{background:rgba(74,168,255,.18); color:#2f6fd0}

/* ---------------- кнопки ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  font:inherit; font-weight:650; cursor:pointer; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--sun{background:linear-gradient(180deg,var(--sun-1),var(--sun-2)); color:#3a2200;
  box-shadow:0 8px 20px rgba(255,143,54,.35)}
.btn--sun:hover{box-shadow:0 10px 26px rgba(255,143,54,.45)}
.btn--ghost{background:rgba(255,255,255,.66); border-color:var(--line); color:var(--ink)}
.btn--big{padding:16px 34px; font-size:17px}
.btn--small{padding:8px 16px; font-size:14px}
.btn[disabled]{opacity:.6; cursor:progress; transform:none}

/* ---------------- секции ---------------- */
.hero{padding:76px 0 52px; text-align:center}
.hero__inner{max-width:820px}
.hero__eyebrow{display:inline-block; margin:0 0 16px; padding:6px 14px;
  border:1px solid rgba(74,168,255,.35); border-radius:999px; background:rgba(255,255,255,.6);
  color:#2f6fd0; font-size:13px; letter-spacing:.6px; text-transform:uppercase}
.hero__title{margin:0 0 16px; font-size:clamp(28px,4.6vw,48px); line-height:1.14; font-weight:750; letter-spacing:-.4px}
.hero__lead{margin:0 auto 28px; max-width:640px; font-size:17.5px; color:var(--ink-soft)}
.hero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.section{padding:56px 0}
.section__title{margin:0 0 10px; font-size:clamp(22px,3vw,32px); font-weight:750; letter-spacing:-.3px}
.section__lead{margin:0 0 26px; color:var(--ink-soft)}

/* стеклянная карточка БЕЗ blur */
.glass{
  background:var(--card);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(38,49,78,.10);
}

/* ---------------- панель синхронизации ---------------- */
.panel{padding:24px}
.panel__head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.panel__title{margin:0; font-size:19px; font-weight:700}
.dot{width:10px; height:10px; border-radius:50%; background:#c9d2e4; margin-left:auto}
.dot.is-ok{background:var(--green); box-shadow:0 0 10px rgba(84,201,138,.7)}
.dot.is-bad{background:#ff7a7a; box-shadow:0 0 10px rgba(255,122,122,.6)}

/* терминал: тёмная панель, моно-шрифт */
.terminal{
  height:186px; overflow:hidden;
  padding:14px 16px; margin-bottom:18px;
  border-radius:14px;
  background:#161d2e; color:#a9e8c8;
  font:13px/1.65 Consolas,"Courier New",monospace;
}
.terminal__line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.terminal__line b{color:#7fd4ff; font-weight:600}
.terminal__line i{color:#ffd48a; font-style:normal}

/* ---------------- форма ---------------- */
.form__label{display:block; margin-bottom:8px; font-size:14px; color:var(--ink-soft)}
.form__row{display:flex; gap:12px; flex-wrap:wrap}
.form__input{
  flex:1 1 240px; min-width:0;
  padding:13px 16px; border-radius:12px;
  background:rgba(255,255,255,.9); color:var(--ink);
  border:1px solid var(--line); font:inherit;
}
.form__input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,.18)}
.form__input--mono{font-family:Consolas,"Courier New",monospace; font-size:13px; resize:vertical; width:100%; margin-bottom:10px}
.form__hint{margin:10px 0 0; color:var(--ink-soft); font-size:13.5px}

.result{margin-top:18px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.72); border:1px solid var(--line)}
.result__status{margin:0; font-weight:650}
.result__status.ok{color:#1f8a52}
.result__status.err{color:#c4384f}
.result__key{margin-top:14px}

/* ---------------- тарифы ---------------- */
.prices{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:26px}
.price{
  position:relative; display:flex; flex-direction:column;
  padding:22px 18px; border-radius:var(--radius);
  background:var(--card-solid);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(38,49,78,.09);
  border-top:5px solid var(--blue);
}
.price--sky{border-top-color:var(--blue)}
.price--green{border-top-color:var(--green)}
.price--sun{border-top-color:var(--sun-2)}
.price--violet{border-top-color:var(--violet)}
.price--teal{border-top-color:var(--teal)}
.price--featured{transform:translateY(-6px); box-shadow:0 16px 34px rgba(255,143,54,.20)}
.price__badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  padding:4px 12px; border-radius:999px; background:linear-gradient(180deg,var(--sun-1),var(--sun-2));
  color:#3a2200; font-size:12px; font-weight:700; white-space:nowrap}
.price__name{margin:6px 0 10px; font-size:16px; font-weight:700}
.price__value{margin:0; font-size:30px; font-weight:750; letter-spacing:-.5px}
.price__days{margin:2px 0 14px; color:var(--ink-soft); font-size:14px}
.price__list{list-style:none; margin:0 0 18px; padding:0; font-size:14px; color:var(--ink-soft)}
.price__list li{padding-left:18px; position:relative; margin-bottom:6px}
.price__list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--green)}
.price .btn{margin-top:auto}

/* ---------------- FAQ ---------------- */
.faq{padding:14px 18px; margin-bottom:12px}
.faq summary{cursor:pointer; font-weight:650}
.faq p{margin:10px 0 2px; color:var(--ink-soft); font-size:14.5px}

/* ---------------- подвал ---------------- */
.footer{border-top:1px solid var(--line); padding:26px 0; margin-top:10px; background:rgba(255,255,255,.5)}
.footer__inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer p{margin:0}

/* ---------------- адаптация ---------------- */
@media (max-width:900px){
  .prices{grid-template-columns:repeat(3,1fr)}
  .price--featured{transform:none}
}
@media (max-width:640px){
  .prices{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .hero{padding:52px 0 36px}
  .section{padding:42px 0}
  .orb--big{width:72px; height:72px}
}
@media (max-width:400px){
  .prices{grid-template-columns:1fr}
  .form__row .btn{width:100%}
  .terminal{height:160px}
}

/* Пользователи, попросившие меньше движения, не получают анимаций вовсе. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}