/* ========================================
   КАРАМЕЛЬКА AI — Стили (финал)
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #08080c; color: #e2e8f0; overflow-x: hidden; min-height: 100vh; }

/* ========== CANVAS ========== */
#particles-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ========== ГРАДИЕНТНЫЕ ПЯТНА (уменьшенная яркость) ========== */
.bg-blobs {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    filter: blur(80px); /* Увеличен blur */
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Увеличен blur */
    opacity: 0.12; /* Снижено с 0.2 до 0.12 — текст не висит в воздухе */
    animation: blobFloat 30s ease-in-out infinite;
}

.blob-1 { width: 600px; height: 600px; background: #7c3aed; top: -200px; left: -100px; }
.blob-2 { width: 500px; height: 500px; background: #f59e0b; top: 50%; right: -150px; animation-delay: -10s; }
.blob-3 { width: 400px; height: 400px; background: #ec4899; bottom: -100px; left: 30%; animation-delay: -20s; }

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.08); }
    66% { transform: translate(-30px, 20px) scale(0.92); }
}

/* ========== КОНТЕНТ ========== */
.content { position: relative; z-index: 1; }

/* ========== GLASS ========== */
.glass {
    background: rgba(15, 15, 25, 0.7); /* Увеличена непрозрачность */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========== ГРАДИЕНТЫ ========== */
.gradient-text {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-purple {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== КНОПКИ ========== */
.btn-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #0f172a;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(251, 191, 36, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* ========== НАВИГАЦИЯ ========== */
.nav-sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: all 0.3s ease;
}
.nav-sticky.scrolled {
    background: rgba(8, 8, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ========== КАРТОЧКИ ========== */
.feature-card { transition: all 0.3s ease; }
.feature-card:hover {
    transform: translateY(-4px);
    background: rgba(40, 40, 60, 0.6);
}

/* ========== БЕЙДЖИ ========== */
.badge-free { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.badge-premium { background: linear-gradient(135deg, #a855f7, #7c3aed); color: white; }

/* ========== ПОПУЛЯРНАЯ КАРТОЧКА ========== */
.card-popular {
    border: 2px solid #fbbf24;
    box-shadow: 0 0 50px -10px rgba(251, 191, 36, 0.3);
}

/* ========== FAQ ========== */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .fa-chevron-down { transform: rotate(180deg); }
details summary .fa-chevron-down { transition: transform 0.3s ease; }

/* ========== ССЫЛКИ ========== */
a { color: inherit; text-decoration: none; }

/* ========== АНИМАЦИИ СКРОЛЛА ========== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ========== ПУЛЬСАЦИЯ ========== */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ========== АДАПТИВ ========== */
@media (max-width: 768px) {
    .blob { opacity: 0.08; }
    .blob-1 { width: 300px; height: 300px; }
    .blob-2 { width: 250px; height: 250px; }
    .blob-3 { width: 200px; height: 200px; }
}