/* ════════════════════════════════════════════════════════════════════
   LIQUID GLASS «Deep» — скин титульной страницы FastyConnection
   Подключается ПОСЛЕ style.css, переопределяет только внешний вид.
   Откат = убрать <link> на этот файл из index.html.
   Единая система с кабинетом (static/user/css/liquid.css).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Токены ─────────────────────────────────────────────────────── */
:root {
  --bg-primary: #07080f;
  --bg-secondary: rgba(255, 255, 255, 0.055);
  --bg-card: rgba(255, 255, 255, 0.06);
  --accent: #ff653e;
  --accent-hover: #ff7e55;
  --accent-glow: rgba(255, 101, 62, 0.18);
  --text-secondary: rgba(244, 246, 251, 0.62);
  --text-muted: rgba(244, 246, 251, 0.4);
  --border: rgba(255, 255, 255, 0.11);
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --lg-grad-accent: linear-gradient(150deg, #ff653e, #d44a20);
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 2. Аврора-фон (как в кабинете) ───────────────────────────────── */
.lg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.lg-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 90% at 50% -25%, rgba(255, 255, 255, 0.05), transparent 60%);
}
.lg-aurora i {
  position: absolute;
  border-radius: 50%;
  opacity: 0.42;
  will-change: transform;
}
.lg-aurora i:nth-child(1) {
  width: 70vw; height: 70vw;
  background: radial-gradient(closest-side, rgba(255, 101, 62, 0.9), transparent 72%);
  top: -42vw; left: -28vw;
  opacity: 0.36;
  animation: lgDrift1 28s var(--lg-ease) infinite alternate;
}
.lg-aurora i:nth-child(2) {
  width: 62vw; height: 62vw;
  background: radial-gradient(closest-side, rgba(59, 158, 223, 0.9), transparent 72%);
  bottom: -26vw; right: -16vw;
  opacity: 0.5;
  animation: lgDrift2 34s var(--lg-ease) infinite alternate;
}
.lg-aurora i:nth-child(3) {
  width: 46vw; height: 46vw;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.9), transparent 72%);
  top: 38%; left: 56%;
  opacity: 0.32;
  animation: lgDrift3 40s var(--lg-ease) infinite alternate;
}
@keyframes lgDrift1 { to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes lgDrift2 { to { transform: translate(-7vw, -6vh) scale(1.08); } }
@keyframes lgDrift3 { to { transform: translate(-10vw, 8vh) scale(0.92); } }

/* Старые радиальные пятна hero не нужны — их заменила аврора */
.hero::before,
.hero::after { display: none; }

/* ── 3. Шапка ─────────────────────────────────────────────────────── */
.header {
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--lg-edge);
}
.header__logo img {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.header__nav .nav-btn {
  background: var(--lg-grad-accent);
  color: #fff;
  border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 16px rgba(255, 101, 62, 0.3);
  transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.header__nav .nav-btn:hover {
  background: var(--lg-grad-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px rgba(255, 101, 62, 0.42);
}
.mobile-nav {
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* ── 4. Hero ──────────────────────────────────────────────────────── */
.hero__badge {
  background: rgba(255, 101, 62, 0.12);
  border: 1px solid rgba(255, 101, 62, 0.3);
  box-shadow: var(--lg-edge);
}
.btn {
  background: var(--lg-grad-accent);
  color: #fff;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 26px rgba(255, 101, 62, 0.32);
  transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.btn:hover {
  background: var(--lg-grad-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 34px rgba(255, 101, 62, 0.45);
}
/* Пробегающий блик по главным CTA (как в кабинете) */
.btn:not(.btn--outline)::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: lgShine 3.6s var(--lg-ease) infinite;
}
@keyframes lgShine { 0%, 55% { left: -80%; } 100% { left: 140%; } }
.btn--outline {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--lg-edge);
}
.btn--outline::after { display: none; }
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--lg-edge);
}

/* ── 5. Карточки услуг ────────────────────────────────────────────── */
.service-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  box-shadow: var(--lg-edge), 0 12px 34px rgba(0, 0, 0, 0.3);
}
.service-card:hover {
  border-color: rgba(255, 101, 62, 0.35);
  box-shadow: var(--lg-edge), 0 16px 44px rgba(0, 0, 0, 0.4);
}
.service-card__icon {
  background: rgba(255, 101, 62, 0.12);
  border: 1px solid rgba(255, 101, 62, 0.22);
  border-radius: 16px;
}

/* ── 6. Прайс ─────────────────────────────────────────────────────── */
/* Полоса секции — лёгкое затемнение, аврора просвечивает */
.pricing {
  background: rgba(5, 6, 12, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.price-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  box-shadow: var(--lg-edge), 0 12px 34px rgba(0, 0, 0, 0.28);
}
.price-card:hover {
  border-color: rgba(255, 101, 62, 0.4);
}
.price-card__list li { border-bottom-color: rgba(255, 255, 255, 0.07); }
.price-card--premium { border-color: rgba(255, 101, 62, 0.4); }
.price-card__badge {
  background: var(--lg-grad-accent);
  border: none;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(255, 101, 62, 0.35);
}
.pricing__subtitle { border-bottom-color: rgba(255, 255, 255, 0.09); }

/* ── 7. Контакты ──────────────────────────────────────────────────── */
.contact-item__icon {
  background: rgba(255, 101, 62, 0.12);
  border: 1px solid rgba(255, 101, 62, 0.22);
  border-radius: 14px;
}
.contacts__form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;
  box-shadow: var(--lg-edge), 0 14px 40px rgba(0, 0, 0, 0.32);
}
.form-group input,
.form-group textarea {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: rgba(255, 101, 62, 0.55);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

/* ── 8. Футер ─────────────────────────────────────────────────────── */
.footer { border-top-color: rgba(255, 255, 255, 0.08); }

/* ── 9. Доступность / тач / фолбэки ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lg-aurora i:nth-child(n) { animation: none; }
  .btn:not(.btn--outline)::after { animation: none; display: none; }
}
@media (hover: none) {
  /* hover-подъёмы из style.css не должны залипать после тапа */
  .btn:hover,
  .header__nav .nav-btn:hover,
  .service-card:hover,
  .price-card:hover { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: rgba(10, 12, 20, 0.95); }
  .mobile-nav { background: rgba(7, 8, 15, 0.98); }
}