/* ===== Design System: Клиенты за 48 часов ===== */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: #060412; }

/* Animated gradient background */
.hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99,102,241,.25) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 50%, rgba(139,92,246,.15) 0%, transparent 50%),
              radial-gradient(ellipse 50% 40% at 10% 60%, rgba(79,70,229,.1) 0%, transparent 50%),
              #060412;
}

/* Glassmorphism */
.glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-strong {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Glow effects */
.glow-purple { box-shadow: 0 0 60px rgba(99,102,241,.15), 0 0 120px rgba(139,92,246,.08); }
.glow-amber  { box-shadow: 0 0 40px rgba(245,158,11,.2); }

/* CTA pulse */
.cta-pulse { animation: cta-glow 2.5s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35); }
  50%      { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
}

/* Fade-in on scroll */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* Timeline */
.timeline-line { position: relative; }
.timeline-line::before {
  content: ''; position: absolute; left: 31px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(180deg, #6366f1 0%, #a855f7 50%, #6366f1 100%);
  opacity: .3;
}
@media (max-width: 639px) { .timeline-line::before { left: 23px; } }

/* FAQ */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* Modal */
.modal-bg { opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal-bg.open { opacity: 1; pointer-events: auto; }

/* Sticky mobile CTA */
.sticky-cta {
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.sticky-cta.show { transform: translateY(0); }

/* Countdown */
.countdown-digit {
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #ef4444);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-purple {
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Forms */
.form-input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  width: 100%;
  transition: border-color .2s;
}
.form-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.form-input::placeholder { color: rgba(255,255,255,.3); }

/* Status badges */
.badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-green { background: rgba(34,197,94,.15); color: #4ade80; }
.badge-amber { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-red { background: rgba(239,68,68,.15); color: #f87171; }
.badge-gray { background: rgba(156,163,175,.15); color: #9ca3af; }

/* Admin sidebar */
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; border-radius: 0.75rem;
  color: #9ca3af; transition: all .2s;
}
.sidebar-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar-link.active { background: rgba(99,102,241,.15); color: #818cf8; }

/* Video player */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; overflow: hidden;
  border-radius: 1rem;
}
.video-container iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 1rem;
}

/* Table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 0.75rem 1rem;
  color: #6b7280; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 0.875rem;
}
.data-table tr:hover td { background: rgba(255,255,255,.02); }