/* Start custom CSS for html, class: .elementor-element-cfdfb93 *//* ======= Общие сбросы ======= */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
      color: #333;
      line-height: 1.5;
    }
    a { text-decoration: none; }

    /* ======= Секция и контейнер ======= */
    .blog-categories {
      background: radial-gradient(circle at top left, #f0f4ff, #ffffff);
      padding: 40px 20px;
    }

    /* ======= Заголовок секции ======= */
    .blog-categories-header {
      text-align: center;
      margin-bottom: 40px;
    }
    .blog-categories-header h2 {
      font-size: 2.5rem;
      font-weight: 800;
      letter-spacing: 1px;
      margin-bottom: 12px;
    }
    .blog-categories-header p {
      font-size: 1.1rem;
      color: #666;
    }

    /* ======= Сетка карточек ======= */
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ======= Карточка ======= */
    .category-card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      padding: 2.5rem 1.5rem;
      text-align: center;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      transform-style: preserve-3d;
      perspective: 1000px;

      /* текстовый цвет по умолчанию — белый */
      color: var(--text-color, #fff);

      /* для анимации фонового градиента */
      background-size: 200% 200%;
      animation: gradientShift 8s ease infinite;
    }
    .category-card:hover {
      transform: scale(1.05) translateY(-8px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.15);
    }

    /* ======= Анимация фонового градиента ======= */
    @keyframes gradientShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ======= Переливающийся shimmer ======= */
    .category-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.2) 50%,
        transparent 100%
      );
      transform: translateX(-100%);
      animation: shimmer 4s infinite ease-in-out;
      pointer-events: none;
      z-index: 2;
    }
    @keyframes shimmer {
      0%   { transform: translateX(-100%); }
      50%  { transform: translateX(100%); }
      100% { transform: translateX(100%); }
    }

    /* ======= Полоса‑блеск при hover ======= */
    .category-card .shine {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 30%;
      height: 200%;
      background: rgba(255,255,255,0.2);
      transform: rotate(25deg) translateX(-100%);
      transition: transform 0.7s ease;
      z-index: 3;
    }
    .category-card:hover .shine {
      transform: rotate(25deg) translateX(350%);
    }

    /* ======= Псевдо‑рамка вокруг карточки ======= */
    .category-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid transparent;
      border-radius: 16px;
      transition: border-color 0.3s ease;
      pointer-events: none;
      z-index: 4;
    }
    .category-card:hover::before {
      border-color: rgba(255,255,255,0.6);
    }

    /* ======= Внутренние элементы ======= */
    .icon-wrapper {
      width: 80px; height: 80px;
      margin: 0 auto 1rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.6);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .icon-wrapper::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at top left, #ffffff80, transparent);
    }
    .icon-wrapper .icon {
      width: 60%;
      height: auto;
      object-fit: contain;
      z-index: 1;
    }
    .label {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    .subtitle {
      font-size: 0.95rem;
      opacity: 0.85;
    }

    /* ======= Градиенты и цвета текста для каждой категории ======= */
    .cat-all {
      --text-color: #333;
      background: linear-gradient(135deg, #b0bec5, #eceff1);
    }
    .cat-instagram {
      --text-color: #fff;
      background: linear-gradient(135deg, #fdcbf1, #e1306c, #833ab4);
    }
    .cat-tiktok {
      --text-color: #fff;
      background: linear-gradient(135deg, #69c9d0, #010101, #ee1d52);
    }
    .cat-telegram {
      --text-color: #fff;
      background: linear-gradient(135deg, #a6c8ff, #0088cc, #33aaff);
    }
    .cat-youtube {
      --text-color: #fff;
      background: linear-gradient(135deg, #ff9a9e, #ff0000, #cc0000);
    }
    .cat-business {
      --text-color: #fff;
      background: linear-gradient(135deg, #d1c4e9, #673ab7, #512da8);
    }
    .cat-seo {
      --text-color: #333;
      background: linear-gradient(135deg, #c8e6c9, #4caf50, #087f23);
    }
    .cat-marketing {
      --text-color: #fff;
      background: linear-gradient(135deg, #ffe0b2, #fb8c00, #e65100);
    }

    /* ======= Адаптив ======= */
    @media (max-width: 600px) {
      .blog-categories-header h2 { font-size: 2rem; }
      .blog-categories { padding: 20px 10px; }
      .category-card { padding: 2rem 1rem; }
      .icon-wrapper { width: 64px; height: 64px; }
      .icon-wrapper .icon { width: 50%; }
      .label { font-size: 1.1rem; }
    }/* End custom CSS */