@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap');

:root {
  --accent-red: #e63946;
  --text-gray: #a1a1aa;
}

/* ========================================= */
/* БАЗОВЫЕ НАСТРОЙКИ (ТЕМНАЯ ТЕМА) */
/* ========================================= */
body {
  /* Возвращаем черный фон и настраиваем переменные для эффекта */
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  
  --c-content: #e1e1e1; /* Белый текст */
  --c-action: #e63946; /* Наш фирменный красный */
  
  --c-bg: #0a0a0c; /* Глубокий черный фон */
  
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
  --saturation: 150%;
  
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  background: var(--c-bg);
  color: var(--c-content);
  
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--accent-red);
  text-decoration: none;
}

/* ========================================= */
/* ПЛАВАЮЩИЕ ПЯТНА (ДЛЯ ОБЪЕМА СТЕКЛА) */
/* ========================================= */
.background-blobs {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2; /* Легкая прозрачность, чтобы не слепило на черном фоне */
    animation: float 12s infinite alternate ease-in-out;
}

.blob.red {
    width: 450px; height: 450px;
    background: var(--accent-red);
    top: -10%; left: -5%;
}

.blob.dark-gray {
    width: 400px; height: 400px;
    background: color-mix(in srgb, var(--c-action) 60%, transparent);
    bottom: -10%; right: 10%;
    animation-delay: -6s;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 50px) scale(1.1); }
}

/* ========================================= */
/* ЭФФЕКТ ЖИДКОГО СТЕКЛА (GLASSMORPHISM) */
/* ========================================= */
.glass-panel {
    background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--c-light) 10%, transparent);
    box-shadow: 
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        0px 10px 30px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 15%), transparent);
    color: var(--c-content);
}