* { font-family: 'Inter', sans-serif; }
span { font-weight: bold; }
.mono { font-family: 'JetBrains Mono', monospace; }

html, body { max-width: 100vw; overflow-x: hidden; }
body { background: #0A0A0A; color: #FFFFFF; position: relative; }

.v-background {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 90vw; font-weight: 900; color: rgba(94, 127, 163, 0.05);
  pointer-events: none; z-index: 0; letter-spacing: -0.1em; user-select: none;
  width: 100%; text-align: center;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(94, 127, 163, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 127, 163, 0.05) 1px, transparent 1px);
  background-size: 50px 50px; animation: gridMove 20s linear infinite;
}
@keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }

.glow-blue { box-shadow: 0 0 40px rgba(94, 127, 163, 0.35), 0 0 80px rgba(94, 127, 163, 0.15); }
.text-glow { text-shadow: 0 0 30px rgba(94, 127, 163, 0.5); }

.gradient-text {
  background: linear-gradient(135deg, #5E7FA3 0%, #8FB3D9 50%, #5E7FA3 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.service-card {
  background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(10, 10, 10, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(94, 127, 163, 0.15), transparent); transition: left 0.6s;
}
.service-card:hover::before { left: 100%; }
.service-card:hover {
  border-color: rgba(94, 127, 163, 0.5); transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(94, 127, 163, 0.25);
}

.stage-card {
  background: rgba(10, 10, 10, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s;
}
.stage-card:hover { background: rgba(26, 26, 26, 0.7); border-color: rgba(94, 127, 163, 0.45); }

.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, #5E7FA3, #1B2A44); transition: all 0.3s;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(94, 127, 163, 0.45); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #5E7FA3; border-radius: 4px; }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; pointer-events: none; }

.nav-link { position: relative; transition: color 0.3s; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: #5E7FA3; transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

.hero-visual { position: relative; }
.hero-visual::before {
  content: ''; position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(94, 127, 163, 0.35), transparent 70%);
  z-index: 0; animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }

.stat-num { font-variant-numeric: tabular-nums; }
.blue-line { height: 1px; background: linear-gradient(90deg, transparent, #5E7FA3, transparent); }

.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.console-scroll {
  scrollbar-width: thin;
  scrollbar-color: #22c55e transparent;
  scroll-behavior: smooth;
}
.console-scroll::-webkit-scrollbar { width: 4px; }
.console-scroll::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 2px; }

.crt-overlay::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px; pointer-events: none; opacity: 0.4; z-index: 1;
}
.crt-overlay::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 60px rgba(0, 255, 0, 0.15); pointer-events: none; z-index: 1;
}

/* ==========================================
   КНОПКА ПИТАНИЯ (ИСПРАВЛЕННЫЕ СТИЛИ)
   ========================================== */

/* Базовые стили кнопки (статичные, без анимаций) */
.power-btn {
  position: relative;
  transition: all 0.3s ease;
}

/* Псевдоэлементы по умолчанию скрыты и плавно исчезают */
.power-btn::before,
.power-btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease, inset 0.5s ease;
  pointer-events: none;
}

/* === АНИМАЦИИ ТОЛЬКО ПРИ КЛАССЕ .power-btn--idle === */

/* Вращающееся кольцо */
.power-btn--idle::before {
  inset: -4px;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(94, 127, 163, 0.15) 110deg,
    rgba(143, 179, 217, 0.6) 120deg,
    rgba(94, 127, 163, 0.15) 130deg,
    transparent 180deg,
    rgba(94, 127, 163, 0.15) 290deg,
    rgba(143, 179, 217, 0.6) 300deg,
    rgba(94, 127, 163, 0.15) 310deg,
    transparent 360deg
  );
  opacity: 0.8;
  animation: spin 3s linear infinite;
  filter: blur(2px);
}

/* Внешнее свечение (аура) */
.power-btn--idle::after {
  inset: -10px;
  z-index: -2;
  background: radial-gradient(circle, rgba(94, 127, 163, 0.5), transparent 70%);
  opacity: 0.6;
  animation: powerGlow 3s ease-in-out infinite;
}

/* Усиление эффектов при наведении (только в режиме ожидания) */
.power-btn--idle:hover::before {
  opacity: 1;
  inset: -6px;
  filter: blur(1px);
}
.power-btn--idle:hover::after {
  opacity: 1;
  inset: -12px;
}

/* Эффект физического нажатия */
.power-btn:active {
  transform: scale(0.9);
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes powerGlow {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Мерцание LED индикатора */
.power-btn-led {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transition: all 0.3s;
  animation: ledBlink 2s ease-in-out infinite;
}

@keyframes ledBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}