/* ═══════════════════════════════════════════════════════════════════
   CMS Django — Дизайн-пресеты сайта
   Цвета НЕ меняем (они идут из настроек сайта).
   Меняем геометрию, тени, типографику, hover-эффекты.

   Пресеты:
   - .design-modern        — оставляем как есть (мягкий, округлый)
   - .design-institutional — строгий, угловатый, формальный
   - .design-minimal       — минимальный, без теней, много воздуха
   - .design-bold          — яркий, сильные тени, толстые рамки
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   🏛 INSTITUTIONAL — строгий, угловатый, формальный
   (министерство, банк, государственный сайт, юридическая компания)
   ═══════════════════════════════════════════════════════════════════ */

body.design-institutional {
  /* Углы — почти квадратные */
  --radius-button: 2px !important;
  --radius-card:   2px !important;
  --radius-input:  2px !important;
  --radius-image:  0 !important;
}

/* Brand-градиент → плотный одиночный цвет (формально) */
body.design-institutional {
  --brand-grad: var(--primary);
}

/* Заголовки — крупные, плотные, прописные, формальные */
body.design-institutional h1,
body.design-institutional h2,
body.design-institutional h3,
body.design-institutional .font-display {
  letter-spacing: -0.01em;
  font-family: 'Merriweather', 'Playfair Display', Georgia, serif;
  font-weight: 800;
}
body.design-institutional h2 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
}
body.design-institutional h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--primary);
}

/* Карточки — строгие рамки, без теней, без подъёмов */
body.design-institutional article,
body.design-institutional .cms-card,
body.design-institutional .container-cms aside > div {
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--primary) !important;
  transition: border-color .15s !important;
}
body.design-institutional article:hover,
body.design-institutional .cms-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-top-color: var(--accent) !important;
}

/* Hero — без скруглений, прямоугольный, с тёмной полосой подписи */
body.design-institutional .hero-section .liquid-glass {
  background: rgba(15, 23, 42, .85) !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 4px solid var(--primary) !important;
  box-shadow: none !important;
}
body.design-institutional .hero-swiper .swiper-slide > a > div {
  border-radius: 0 !important;
}
body.design-institutional .liquid-glass::before { display: none !important; }
body.design-institutional .liquid-glass-btn {
  background: rgba(15, 23, 42, .85) !important;
  border-radius: 0 !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* Категории — без градиентов, плоский фирменный цвет + рамка */
body.design-institutional .grid > a[style*="background"] {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--primary) !important;
  border-radius: 0 !important;
}
body.design-institutional .grid > a[style*="background"]:hover {
  border-top-color: var(--accent) !important;
  transform: none !important;
}
body.design-institutional .grid > a[style*="background"] .bi {
  color: var(--primary) !important;
}

/* Newsletter CTA — без скруглений, формальный */
body.design-institutional section > .relative.rounded-3xl {
  border-radius: 0 !important;
  border-left: 6px solid var(--accent);
}

/* Кнопки — квадратные, плотные, моноцветные */
body.design-institutional a[style*="brand-grad"],
body.design-institutional button[style*="brand-grad"] {
  background: var(--primary) !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}

/* Изображения в карточках — без скруглений */
body.design-institutional .prose img,
body.design-institutional article img { border-radius: 0 !important; }

/* Бейджи / теги — прямоугольные */
body.design-institutional .inline-block[style*="border-radius:var(--radius-button)"] {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Шапка — строгая, с верхней тёмной полосой */
body.design-institutional header {
  border-bottom: 3px solid var(--primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ⚪ MINIMAL — минимальный, без теней, много воздуха
   (Apple-like, premium-блог, дизайн-студия)
   ═══════════════════════════════════════════════════════════════════ */

body.design-minimal {
  --radius-button: 6px !important;
  --radius-card:   6px !important;
  --radius-input:  6px !important;
  --radius-image:  6px !important;
  --brand-grad:    var(--primary);
}

/* Гарнитура заголовков — тонкая, лёгкая */
body.design-minimal h1,
body.design-minimal h2,
body.design-minimal h3,
body.design-minimal .font-display {
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}
body.design-minimal h1 { font-weight: 600 !important; }

/* Карточки — без теней, ультра-тонкая рамка, простой ховер */
body.design-minimal article,
body.design-minimal .cms-card,
body.design-minimal .container-cms aside > div {
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  background: var(--card-bg) !important;
  transition: border-color .2s, transform .2s !important;
}
body.design-minimal article:hover,
body.design-minimal .cms-card:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--text) !important;
}

/* Воздух — больше внутренних отступов в карточках */
body.design-minimal article .p-6 { padding: 2rem !important; }

/* Hero — стеклянная панель без размытия, тонкие линии */
body.design-minimal .liquid-glass {
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: none !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.design-minimal .liquid-glass h3,
body.design-minimal .liquid-glass p,
body.design-minimal .liquid-glass span,
body.design-minimal .liquid-glass div {
  color: var(--text) !important;
}
body.design-minimal .liquid-glass .text-white\/85,
body.design-minimal .liquid-glass .text-white\/75 { color: var(--muted) !important; }
body.design-minimal .liquid-glass::before { display: none !important; }
body.design-minimal .liquid-glass-btn {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--text) !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* Hero-задник — отключаем размытие, остаётся чёткое изображение */
body.design-minimal .hero-bg { filter: none !important; opacity: .15 !important; }
body.design-minimal .hero-section::before { display: none !important; }

/* Категории — белые карточки с лёгкой обводкой */
body.design-minimal .grid > a[style*="background"] {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow: none !important;
}
body.design-minimal .grid > a[style*="background"]:hover {
  border-color: var(--text) !important;
  transform: none !important;
}
body.design-minimal .grid > a[style*="background"] .bi {
  color: var(--primary) !important;
}
body.design-minimal .grid > a[style*="background"] .text-xs.opacity-80 {
  opacity: .6 !important; color: var(--muted) !important;
}

/* Newsletter CTA — без градиента, белый блок с лёгкой подписью */
body.design-minimal section > .relative.rounded-3xl {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow: none !important;
}
body.design-minimal section > .relative.rounded-3xl .absolute { display: none !important; }
body.design-minimal section > .relative.rounded-3xl h2,
body.design-minimal section > .relative.rounded-3xl p,
body.design-minimal section > .relative.rounded-3xl input { color: var(--text) !important; }
body.design-minimal section > .relative.rounded-3xl p { color: var(--muted) !important; }
body.design-minimal section > .relative.rounded-3xl input {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, .15) !important;
}
body.design-minimal section > .relative.rounded-3xl input::placeholder { color: var(--muted) !important; }
body.design-minimal section > .relative.rounded-3xl button {
  background: var(--text) !important; color: var(--card-bg) !important;
}

/* Кнопки — простые, плоские */
body.design-minimal a[style*="brand-grad"],
body.design-minimal button[style*="brand-grad"] {
  background: var(--text) !important;
  color: var(--card-bg) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* Шапка — тонкая линия снизу, никаких теней */
body.design-minimal header { border-bottom: 1px solid rgba(0, 0, 0, .06) !important; }
body.design-minimal header.shadow-lg { box-shadow: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   🎨 BOLD — яркий, толстые рамки, сильные тени, контрастные блоки
   (агентство, журнал, креативное портфолио)
   ═══════════════════════════════════════════════════════════════════ */

body.design-bold {
  --radius-button: 999px !important;   /* пилюли */
  --radius-card:   24px !important;
  --radius-input:  16px !important;
  --radius-image:  20px !important;
}

/* Заголовки — крупные, чёрные, плотные, со сжатой кегальной парой */
body.design-bold h1,
body.design-bold h2,
body.design-bold h3,
body.design-bold .font-display {
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}
body.design-bold h1 { font-size: clamp(2.2rem, 5vw, 4rem) !important; }
body.design-bold h2 { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; }

/* Карточки — толстая чёрная рамка снизу/справа (neo-brutalist), большая тень */
body.design-bold article,
body.design-bold .cms-card {
  border: 2px solid var(--text) !important;
  box-shadow: 8px 8px 0 var(--text) !important;
  transition: transform .15s, box-shadow .15s !important;
}
body.design-bold article:hover,
body.design-bold .cms-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 12px 12px 0 var(--text) !important;
}
body.design-bold article .p-6 { padding: 1.75rem !important; }

/* Сайдбар-виджеты — той же brutalist стиль */
body.design-bold .container-cms aside > div {
  border: 2px solid var(--text) !important;
  box-shadow: 6px 6px 0 var(--text) !important;
}

/* Hero — большой radius, толстая чёрная рамка вокруг карусели */
body.design-bold .hero-swiper .swiper-slide > a > div {
  border: 3px solid var(--text) !important;
  box-shadow: 10px 10px 0 var(--text) !important;
}
body.design-bold .liquid-glass {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 2px solid var(--text) !important;
  box-shadow: 5px 5px 0 var(--text) !important;
  backdrop-filter: none !important;
  border-radius: 16px !important;
}
body.design-bold .liquid-glass::before { display: none !important; }
body.design-bold .liquid-glass h3,
body.design-bold .liquid-glass p,
body.design-bold .liquid-glass span,
body.design-bold .liquid-glass div { color: var(--text) !important; }
body.design-bold .liquid-glass .drop-shadow-lg,
body.design-bold .liquid-glass .drop-shadow { filter: none !important; }
body.design-bold .liquid-glass-btn {
  background: var(--text) !important;
  color: var(--card-bg) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  border-radius: 999px !important;
}

/* Категории — тоже brutalist плитки */
body.design-bold .grid > a[style*="background"] {
  border: 2px solid var(--text) !important;
  box-shadow: 6px 6px 0 var(--text) !important;
  border-radius: 20px !important;
}
body.design-bold .grid > a[style*="background"]:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 var(--text) !important;
}

/* Newsletter CTA — толстая рамка вокруг градиентного блока */
body.design-bold section > .relative.rounded-3xl {
  border: 3px solid var(--text) !important;
  box-shadow: 12px 12px 0 var(--text) !important;
  border-radius: 28px !important;
}

/* Кнопки — пилюли с чёрной рамкой и тенью */
body.design-bold a[style*="brand-grad"],
body.design-bold button[style*="brand-grad"] {
  border: 2px solid var(--text) !important;
  box-shadow: 4px 4px 0 var(--text) !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  letter-spacing: .2px;
}
body.design-bold a[style*="brand-grad"]:hover,
body.design-bold button[style*="brand-grad"]:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--text) !important;
}

/* Бейджи — пилюли */
body.design-bold .inline-block[style*="border-radius:var(--radius-button)"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Шапка — толстая нижняя граница */
body.design-bold header { border-bottom: 3px solid var(--text) !important; }


/* ═══════════════════════════════════════════════════════════════════
   🌊 GLASS — стеклянный (frosted glass, плавные fade-in, parallax-hover)
   ═══════════════════════════════════════════════════════════════════ */

body.design-glass {
  --radius-button: 14px !important;
  --radius-card:   22px !important;
  --radius-input:  14px !important;
  --radius-image:  16px !important;
  background:
    radial-gradient(800px circle at 10% -10%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 60%),
    radial-gradient(700px circle at 110% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
    radial-gradient(900px circle at 50% 110%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Плавающие цветные «капли» как фон */
body.design-glass::before,
body.design-glass::after {
  content: '';
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
  animation: glass-float 22s ease-in-out infinite alternate;
}
body.design-glass::before { top: -10%;  left: -10%;  background: var(--primary); }
body.design-glass::after  { bottom: -15%; right: -10%; background: var(--accent); animation-delay: -8s; }

@keyframes glass-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(80px, 60px) scale(1.15); }
  100% { transform: translate(-60px, 40px) scale(.95); }
}

body.design-glass > * { position: relative; z-index: 1; }

/* Карточки — frosted glass */
body.design-glass article,
body.design-glass .cms-card,
body.design-glass .container-cms aside > div {
  background: color-mix(in srgb, var(--card-bg) 65%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow:
    0 14px 40px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s !important;
}
body.design-glass article:hover,
body.design-glass .cms-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow:
    0 28px 60px rgba(15, 23, 42, .14),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* Hero — оставляем liquid glass, усиливаем */
body.design-glass .liquid-glass {
  background: rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
}

/* Категории — стеклянные плитки */
body.design-glass .grid > a[style*="background"] {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 55%, transparent),
      color-mix(in srgb, var(--accent) 45%, transparent)) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12) !important;
}

/* Шапка — прозрачная с blur */
body.design-glass header {
  background: color-mix(in srgb, var(--header-bg) 60%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255, 255, 255, .25) !important;
}

/* Заголовки — плавное появление */
body.design-glass h1, body.design-glass h2 {
  letter-spacing: -0.02em;
}

/* Кнопки — стеклянные пилюли */
body.design-glass a[style*="brand-grad"],
body.design-glass button[style*="brand-grad"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 88%, white 0%),
    color-mix(in srgb, var(--accent)  88%, white 0%)) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  transition: transform .25s, box-shadow .25s !important;
}
body.design-glass a[style*="brand-grad"]:hover,
body.design-glass button[style*="brand-grad"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--primary) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ✨ AURORA — переливающиеся градиенты + neon-свечение
   ═══════════════════════════════════════════════════════════════════ */

body.design-aurora {
  --radius-button: 999px !important;
  --radius-card:   20px !important;
  --radius-input:  14px !important;
  --radius-image:  14px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 22%, var(--bg)) 0%,
      var(--bg) 30%,
      color-mix(in srgb, var(--accent) 18%, var(--bg)) 70%,
      var(--bg) 100%) !important;
  background-size: 300% 300% !important;
  background-attachment: fixed !important;
  animation: aurora-shift 18s ease infinite !important;
}
@keyframes aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Заголовки — переливающийся градиентный текст */
body.design-aurora h1,
body.design-aurora h2,
body.design-aurora .font-display {
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  animation: aurora-text 6s ease-in-out infinite alternate;
}
@keyframes aurora-text {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* Карточки — тонкая градиентная подсветка вокруг + glow при hover */
body.design-aurora article,
body.design-aurora .cms-card {
  position: relative;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, var(--primary), var(--accent)) border-box !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
  transition: transform .35s, box-shadow .35s !important;
}
body.design-aurora article:hover,
body.design-aurora .cms-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
    0 20px 50px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 60px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

/* Hero — стеклянная панель с цветным свечением */
body.design-aurora .liquid-glass {
  background: rgba(15, 23, 42, .42) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  box-shadow: 0 0 40px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

/* Кнопки — neon-пилюли с пульсирующим свечением */
body.design-aurora a[style*="brand-grad"],
body.design-aurora button[style*="brand-grad"] {
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary)) !important;
  background-size: 200% 100% !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--primary) 45%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 25%, transparent) !important;
  animation: aurora-btn 4s ease infinite !important;
  transition: transform .2s, box-shadow .2s !important;
}
body.design-aurora a[style*="brand-grad"]:hover,
body.design-aurora button[style*="brand-grad"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 30px color-mix(in srgb, var(--primary) 70%, transparent),
    0 0 60px color-mix(in srgb, var(--accent) 50%, transparent) !important;
}
@keyframes aurora-btn {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Категории — анимированные градиентные плитки с glow */
body.design-aurora .grid > a[style*="background"] {
  background-size: 200% 200% !important;
  animation: aurora-shift 12s ease infinite !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}
body.design-aurora .grid > a[style*="background"]:hover {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent),
    0 20px 50px color-mix(in srgb, var(--primary) 45%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Шапка — со свечением снизу */
body.design-aurora header {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════
   🌌 COSMIC — космический dark luxury, грандиозный, parallax
   ═══════════════════════════════════════════════════════════════════ */

body.design-cosmic {
  --radius-button: 12px !important;
  --radius-card:   18px !important;
  --radius-input:  12px !important;
  --radius-image:  14px !important;
  --text: #f1f5f9 !important;
  --muted: #94a3b8 !important;
  --bg: #050816 !important;
  --card-bg: #0b1228 !important;
  --header-bg: rgba(5, 8, 22, .85) !important;
  --border: #1f2a52 !important;
  background:
    radial-gradient(1200px circle at 20% -10%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 50%),
    radial-gradient(1000px circle at 90% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 50%),
    radial-gradient(1400px circle at 50% 120%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%),
    #050816 !important;
  background-attachment: fixed !important;
  color: #f1f5f9 !important;
}

/* «Звёзды» на заднем плане (SVG noise) */
body.design-cosmic::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 10%, #fff, transparent),
    radial-gradient(2px 2px at 80% 70%, #fff, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 40%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #fff, transparent),
    radial-gradient(2px 2px at 90% 90%, #fff, transparent),
    radial-gradient(1px 1px at 40% 50%, #fff, transparent);
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: .35;
  animation: cosmic-stars 90s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes cosmic-stars {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-600px, -600px); }
}

body.design-cosmic > * { position: relative; z-index: 1; }

/* Текст по умолчанию — светлый */
body.design-cosmic,
body.design-cosmic p,
body.design-cosmic li { color: #cbd5e1 !important; }

/* Заголовки — грандиозные, с лёгким свечением */
body.design-cosmic h1,
body.design-cosmic h2,
body.design-cosmic h3,
body.design-cosmic .font-display {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-shadow:
    0 0 30px color-mix(in srgb, var(--primary) 40%, transparent),
    0 0 60px color-mix(in srgb, var(--accent) 25%, transparent);
}
body.design-cosmic h1 {
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--accent) 70%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Карточки — глубокие, с фиолетовой/синей подсветкой */
body.design-cosmic article,
body.design-cosmic .cms-card,
body.design-cosmic .container-cms aside > div {
  background: linear-gradient(180deg, #0b1228 0%, #060a1c 100%) !important;
  border: 1px solid #1f2a52 !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s !important;
}
body.design-cosmic article:hover,
body.design-cosmic .cms-card:hover {
  transform: translateY(-8px) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .6),
    0 0 60px color-mix(in srgb, var(--accent) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Текст внутри карточек — светлый */
body.design-cosmic article *,
body.design-cosmic .cms-card * { color: inherit; }
body.design-cosmic article h3 { color: #f1f5f9 !important; }
body.design-cosmic article p { color: #94a3b8 !important; }
body.design-cosmic article [style*="color:var(--text)"] { color: #f1f5f9 !important; }
body.design-cosmic article [style*="color:var(--muted)"] { color: #94a3b8 !important; }
body.design-cosmic [style*="border:1px solid var(--border)"] { border-color: #1f2a52 !important; }

/* Hero — grand glass с фиолетовым свечением */
body.design-cosmic .liquid-glass {
  background: rgba(11, 18, 40, .65) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .5),
    0 0 80px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

/* Категории — космические плитки с глубоким свечением */
body.design-cosmic .grid > a[style*="background"] {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .5),
    0 0 40px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
body.design-cosmic .grid > a[style*="background"]:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .6),
    0 0 80px color-mix(in srgb, var(--accent) 50%, transparent) !important;
}

/* Шапка — полупрозрачная с blur, светящаяся линия снизу */
body.design-cosmic header {
  background: rgba(5, 8, 22, .85) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid #1f2a52 !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
body.design-cosmic header a,
body.design-cosmic header span { color: #f1f5f9 !important; }
body.design-cosmic .cms-nav-link { color: #f1f5f9 !important; }
body.design-cosmic .cms-nav-link:hover { color: color-mix(in srgb, var(--accent) 70%, #fff) !important; }

/* Кнопки — большие, с грандиозным свечением */
body.design-cosmic a[style*="brand-grad"],
body.design-cosmic button[style*="brand-grad"] {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important;
  box-shadow:
    0 0 24px color-mix(in srgb, var(--primary) 55%, transparent),
    0 0 50px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  font-weight: 700 !important;
  transition: transform .3s, box-shadow .3s !important;
}
body.design-cosmic a[style*="brand-grad"]:hover,
body.design-cosmic button[style*="brand-grad"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 0 40px color-mix(in srgb, var(--primary) 80%, transparent),
    0 0 80px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

/* Newsletter CTA — космический градиент */
body.design-cosmic section > .relative.rounded-3xl {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 50%),
    linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .5),
    0 0 100px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* Подвал — глубже */
body.design-cosmic footer { background: #030616 !important; }


/* ═══════════════════════════════════════════════════════════════════
   Универсальные плавные появления (для всех новых пресетов)
   ═══════════════════════════════════════════════════════════════════ */

body.design-glass article,
body.design-aurora article,
body.design-cosmic article,
body.design-glass section > div,
body.design-aurora section > div,
body.design-cosmic section > div {
  animation: cms-fade-in-up .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cms-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════
   Стили кнопок (button_style) — работают поверх любого пресета
   ═══════════════════════════════════════════════════════════════════ */

body.btn-filled a[style*="brand-grad"],
body.btn-filled button[style*="brand-grad"] {
  background: var(--primary) !important;
}

body.btn-outlined a[style*="brand-grad"],
body.btn-outlined button[style*="brand-grad"] {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}