.ai-card {
    /* 🎛 Переменные для гибкой настройки карточки */
    --card-min-height: 480px;         /* 🔻 Минимальная высота карточки — можно увеличить или уменьшить */
    --avatar-size: 120px;             /* 📏 Размер аватарки (ширина и высота) */
    --avatar-radius: 50%;             /* 🔵 Скругление аватарки: 50% — круг, 0% — квадрат, 20-30% — мягкий эллипс */
    --avatar-border-color: #00cfff;   /* 🖍️ Цвет рамки вокруг аватарки */
    --avatar-glow: 0 0 10px #00cfff;  /* 💫 Свечение вокруг аватарки */
    --title-color: #00cfff;           /* 🔷 Цвет заголовка (имени блогера/канала) */

    background: rgba(255, 255, 255, 0.1);           /* 💠 Полупрозрачный белый фон — создаёт эффект стеклянности */
    border: 1px solid rgba(255, 255, 255, 0.25);    /* 🔳 Светлая рамка — подчёркивает форму карточки */
    border-radius: 16px;                           /* 🟦 Скруглённые углы — делает дизайн более современным */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);     /* 🌫 Глубокая тень — создаёт объём и "выпуклость" */
    backdrop-filter: blur(10px);                   /* 🔮 Размытие фона позади карточки (эффект "стекла") */
    -webkit-backdrop-filter: blur(10px);           /* 🍏 Поддержка blur в Safari */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ⏳ Плавные эффекты при наведении */
    padding: 20px;                                  /* 📦 Отступ внутри карточки */
    text-align: center;                             /* ⬅️ Центровка всего контента */
    min-height: var(--card-min-height);             /* ↕️ Минимальная высота карточки — поддаётся гибкой настройке */
}


.ai-card .avatar {
    width: var(--avatar-size); /* 📏 Ширина аватарки задаётся через переменную (например, 120px) */
    height: var(--avatar-size); /* 📏 Высота тоже — аватарка будет квадратной */
    border-radius: var(--avatar-radius); /* 🟢 Скругление углов — можно сделать круглой (50%) или чуть скруглённой (20%) */
    object-fit: cover; /* 📸 Обрезает изображение по границам, сохраняя пропорции и заполняя весь контейнер */
    border: 2px solid var(--avatar-border-color); /* 🖍️ Цветная рамка вокруг аватарки, задаётся через переменную */
    box-shadow: var(--avatar-glow); /* 🌟 Эффект свечения вокруг аватарки — настраивается переменной */
    margin-bottom: 15px; /* 🔽 Отступ снизу от аватарки до заголовка/текста */
    transition: box-shadow 0.3s ease; /* ⏳ Плавное изменение свечения при наведении */
}

.ai-card:hover .avatar {
    box-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff; /* ✨ При наведении — яркое бирюзовое свечение (два слоя) */
}


/* Hover: лёгкое приподнимание и сияние */
.ai-card:hover {
    transform: translateY(-4px);                         /* ⬆️ Приподнимает карточку — создаёт эффект “нажатия” */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.4);         /* ✨ Голубое внешнее свечение — подчёркивает активное состояние */
}

/* Заголовок блогера */
.ai-card h2 {
    color: #00cfff;           /* 💠 Яркий неоново-голубой цвет — акцентирует внимание на названии */
    font-size: 1.8rem;        /* 🔤 Крупный размер шрифта — делает заголовок хорошо заметным */
    font-weight: 600;         /* 🅱️ Полужирный — выделяет название среди остального текста */
    margin-bottom: 10px;      /* 📏 Отступ снизу — создаёт пространство между заголовком и описанием */
}

/* Описание и текст */
.ai-card p {
    color: #DCDCDC;                        /* 🎨 Светло-серый текст — читается на стеклянном фоне */
    font-size: 0.95rem;                    /* 🔠 Немного меньше стандартного размера */
    font-weight: 500;                      /* 🅱️ Чуть утолщённый шрифт — улучшает восприятие */
    text-shadow: 0 0 2px rgba(0,0,0,0.4);  /* 🌫 Лёгкое затемнение вокруг текста — для контраста */
}




/* 🔷 Неоновая табличка в стиле светлого тумана */
.neon-info-box {
    background: rgba(255, 255, 255, 0.12); /* 💠 Полупрозрачный белый фон — создаёт эффект "запотевшего стекла" */
    border: 1px solid rgba(0, 204, 255, 0.5); /* 🔹 Голубая полупрозрачная рамка — подчёркивает границы блока */
    border-radius: 12px; /* 🟦 Скруглённые углы — добавляют мягкости и современности */
    padding: 1rem 1.5rem; /* 📏 Отступ внутри блока: сверху/снизу 1rem, по бокам 1.5rem */
    margin-bottom: 2rem; /* ⬇️ Отступ снизу — разделяет табличку от контента ниже */
    color: #00ffcc; /* 💬 Основной цвет текста — яркий неоновый бирюзовый */

    /* 🔮 Эффект размытого фона (как стекло) */
    backdrop-filter: blur(6px); /* Поддержка в современных браузерах */
    -webkit-backdrop-filter: blur(15px); /* Поддержка в Safari (отдельно) */

    /* 🌫️ Свечение — создаёт неоновую глубину */
    box-shadow:
        inset 0 0 6px rgba(0, 204, 255, 0.2), /* 🔘 Внутреннее мягкое свечение */
        0 0 8px rgba(0, 204, 255, 0.15);     /* 🔘 Внешнее рассеянное свечение */
}

/* 🎨 Универсальный стиль — всё содержимое таблички наследует цвет */
.neon-info-box,
.neon-info-box * {
    color: #00ccff; /* 📘 Яркий голубой цвет для всего внутри таблички (текст, иконки и т.д.) */
}

/* 🔗 Стилизация ссылок в табличке */
.neon-info-box a {
    color: #1E90FF; /* 🔷 Чёткий синий (DodgerBlue) — выделяет ссылки */
    text-decoration: underline; /* 🔽 Подчёркивание — показывает, что это ссылка */
}




.review-title {
    color: #00ffff;                            /* Яркий бирюзовый — ещё светлее */
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 800;                          /* Ещё жирнее */
    font-size: 2.4rem;                         /* Крупнее для акцента */
    letter-spacing: 1px;                       /* Небольшое разрежение букв — эффект "титула" */
    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px #00e0ff,
        0 0 30px rgba(0, 255, 255, 0.6);       /* Глубокое неоновое сияние */
}


.social-links {
    --link-color: #00ccff;             /* 🔹 Основной цвет текста и иконок */
    --hover-color: #66e0ff;            /* 🔹 Цвет при наведении */
    --icon-size: 1.1rem;               /* 🔹 Размер иконки */
    --text-size: 0.95rem;              /* 🔹 Размер текста */
    --link-gap: 8px;                   /* 🔹 Расстояние между иконкой и текстом */
    --link-padding: 4px 6px;           /* 🔹 Внутренние отступы у ссылки */
    --link-radius: 8px;                /* 🔹 Скругление фона (если активируешь фон) */
    --hover-bg: rgba(0, 204, 255, 0.1);/* 🔹 Фоновый эффект при наведении */
    --transition-speed: 0.25s;         /* ⏳ Скорость анимации */
}

.social-links a {
    display: flex;                     /* Иконка + текст в одну строку */
    align-items: center;              /* Центровка по вертикали */
    gap: var(--link-gap);             /* Расстояние между иконкой и текстом */
    font-weight: 500;
    font-size: var(--text-size);
    padding: var(--link-padding);
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed), background var(--transition-speed);
    border-radius: var(--link-radius);
}

.social-links a i {
    font-size: var(--icon-size);      /* Устанавливаем размер иконки */
    transition: transform var(--transition-speed);
}

.social-links a:hover {
    color: var(--hover-color);        /* Подсветка текста и иконки */
    background-color: var(--hover-bg);/* Лёгкая подсветка фоном */
    text-decoration: underline;
}

.social-links a:hover i {
    transform: scale(1.2);            /* Увеличиваем иконку при наведении */
}



/* AI-контент: адаптивные отступы между карточками */
@media (max-width: 767px) {
  .ai-card {
    margin-bottom: 1.5rem;
  }
}