/* ============================================================
   INTELLIGENCE ART · СТРАНИЦА «ЛУЧШИЕ AI-ИНСТРУМЕНТЫ»
   Вставляется в ОТДЕЛЬНЫЙ Custom Code (Head), условие показа —
   только эта страница. Глобальный CSS не трогаем, дублей нет:
   токены, glass, ia-title, ia-sub, ia-filter уже есть глобально.

   ПРАВИЛО: здесь только СТИЛЬ и механика компонентов.
   Секционные паддинги/гэпы/направления — руками в панели.
   ============================================================ */

/* ── HERO · медиа-плита с отступами ──
   Контейнер медиа. Аспект по брейкпоинтам — это механика
   компонента (панель так не умеет), живёт здесь. */
.ia-hero-media{
  position:relative;
  aspect-ratio:21/9;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--glass-inner),
             0 0 0 1px rgba(95,198,212,.10),
             0 0 44px -10px rgba(95,198,212,.28),
             0 34px 70px -28px rgba(0,0,0,.75);
}
@media (max-width:1024px){ .ia-hero-media{ aspect-ratio:16/9; } }
@media (max-width:680px){  .ia-hero-media{ aspect-ratio:1/1;  } }

/* фон-картинка ставится как Background Image контейнера
   .ia-hero-media в панели (cover, center) — сюда не пишем */



/* контент поверх медиа (HTML-виджет) */
/* скрим прямо на контейнер контента — отдельный div не нужен */
.ia-hero-overlay{ position:relative; }
.ia-hero-overlay::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 74% 84% at 50% 55%, rgba(8,20,25,.58) 0%, rgba(8,20,25,.30) 55%, rgba(8,20,25,.12) 78%),
    linear-gradient(180deg, rgba(10,26,31,.42) 0%, rgba(14,26,27,0) 30%, rgba(14,26,27,0) 62%, rgba(10,26,31,.62) 100%);
}
.ia-hero-overlay > *{ position:relative; z-index:1; }

/* точка-пульс рисуется сама, без span */
.ia-hero-media__proof{ position:relative; padding-left:18px; }
.ia-hero-media__proof::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--glacier); box-shadow:0 0 12px var(--glacier);
  animation:ia-proof-pulse 2.6s ease-in-out infinite;
}
.ia-hero-media__overline{
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(230,242,243,.85);
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.ia-hero-media__title{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.0; letter-spacing:-0.012em;
  text-transform:uppercase;
  color:var(--ice-white);
  text-shadow:0 6px 46px rgba(0,0,0,.65);
}
.ia-hero-media__title .ai{ color:var(--ember); text-shadow:0 0 38px rgba(232,148,60,.5); }
.ia-hero-media__proof{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:clamp(13px,1.1vw,16px);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--glacier);
  text-shadow:0 0 22px rgba(95,198,212,.5), 0 2px 14px rgba(0,0,0,.6);
}
@keyframes ia-proof-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(.82); }
}

/* ── НАВИГАЦИЯ КАТЕГОРИЙ · плитки-якоря ──
   Сетка плиток — HTML-виджет целиком (кнопки нужны для JS). */
.ia-cattiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(140px,13vw,200px), 1fr));
  gap:12px;
}
.ia-cattile{
  position:relative; overflow:hidden;
  height:clamp(64px,6.5vw,92px);
  border-radius:16px;
  border:1px solid rgba(230,242,243,.14);
  box-shadow:var(--glass-inner);
  display:grid; place-items:center;
  isolation:isolate;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ia-cattile__bg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(95,198,212,.05) 0 16px, transparent 16px 32px),
    linear-gradient(135deg, #163842 0%, #0C2028 58%, #0A1A1F 100%);
  background-size:cover; background-position:center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.ia-cattile__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,31,.24) 0%, rgba(10,26,31,.58) 100%);
}
.ia-cattile__label{
  position:relative; z-index:2;
  padding:8px 12px;
  font-weight:700; font-size:clamp(12px,1vw,13.5px);
  letter-spacing:.12em; text-transform:uppercase; text-align:center; line-height:1.35;
  color:var(--ice-white);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.ia-cattile:hover{
  transform:translateY(-3px);
  border-color:rgba(95,198,212,.5);
  box-shadow:var(--glass-inner), 0 0 26px -6px rgba(95,198,212,.45), 0 18px 36px -18px rgba(0,0,0,.6);
}
.ia-cattile:hover .ia-cattile__bg{ transform:scale(1.06); }
.ia-cattile.is-active{
  border-color:rgba(95,198,212,.65);
  box-shadow:var(--glass-inner),
             0 0 0 1px rgba(95,198,212,.3),
             0 0 30px -4px rgba(95,198,212,.55);
}
.ia-cattile:focus, .ia-cattile:focus-visible{ outline:none; }
@media (max-width:680px){ .ia-cattiles{ gap:9px; } }

/* ── СЕКЦИЯ КАТЕГОРИИ · фоны с чередованием ──
   Вешается на ВНЕШНИЙ контейнер секции: ia-cat--a или ia-cat--b.
   Паддинги секции — в панели. */
.ia-cat--a, .ia-cat--b{ position:relative; }
.ia-cat--a{
  background:
    radial-gradient(125% 56% at 50% 4%, rgba(18,42,52,0.50) 0%, rgba(14,26,27,0) 54%),
    linear-gradient(135deg, #0A1A1F 0%, #0C2028 46%, #16282A 100%);
}
.ia-cat--b{
  background:
    radial-gradient(125% 56% at 50% 4%, rgba(18,42,52,0.50) 0%, rgba(14,26,27,0) 54%),
    linear-gradient(135deg, #16282A 0%, #0C2028 54%, #0A1A1F 100%);
}
/* зерно */
.ia-cat--a::before, .ia-cat--b::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='ni'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ni)'/%3E%3C/svg%3E");
}
.ia-cat--a > *, .ia-cat--b > *{ position:relative; z-index:1; }

/* тонкий светящийся дивайдер по верхнему краю секции */
.ia-cat--a::after, .ia-cat--b::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  height:1px; width:min(1240px, calc(100% - 48px));
  background:linear-gradient(90deg,
    rgba(95,198,212,0) 0%,
    rgba(95,198,212,.5) 50%,
    rgba(95,198,212,0) 100%);
  box-shadow:0 0 20px -2px rgba(95,198,212,.35);
}

/* ── КАРУСЕЛЬ ── (механика компонента, живёт в CSS) */
.ia-carousel{ position:relative; }
.ia-rail{
  --rail-gap:clamp(18px,1.8vw,28px);
  --peek:clamp(48px,5vw,86px);
  --cards-per-frame:3;
  display:flex; gap:var(--rail-gap);
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:10px 2px 22px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 94%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, #000 0, #000 94%, rgba(0,0,0,0) 100%);
}
.ia-rail::-webkit-scrollbar{ display:none; }
.ia-rail > *{
  flex:0 0 calc((100% - (var(--cards-per-frame) - 1)*var(--rail-gap) - var(--peek)) / var(--cards-per-frame));
  scroll-snap-align:start;
}
.ia-rail > .is-hidden{ display:none; }
@media (max-width:1180px){ .ia-rail{ --cards-per-frame:2; } }
@media (max-width:680px){
  .ia-rail{ --cards-per-frame:1; --peek:36px; }
  .ia-carousel .s5-arrow{ display:none; }
}
/* стрелки: используем ГЛОБАЛЬНЫЕ .s5-arrow (уже в основном CSS),
   здесь только позиционирование для карусели */
.ia-carousel .s5-arrow--prev{ left:-14px; top:42%; }
.ia-carousel .s5-arrow--next{ right:-14px; top:42%; }

/* ── КАРТОЧКА ИНСТРУМЕНТА ──
   Карточка = ia-card glass (глобальные) + ia-tool (страничный).
   ia-tool добавляет только внутренние элементы. */

.ia-tool .ia-card__media,
.ia-tool__media{
  position:relative;
  aspect-ratio:16/9;
  height:auto;                 /* перебиваем фикс-высоту ia-card__media */
  overflow:hidden;
  border-bottom:1px solid rgba(230,242,243,.08);
}
.ia-tool__title{
  font-family:var(--font-display);
  font-weight:800; font-size:clamp(22px,1.8vw,29px);
  line-height:1.12; color:var(--ice-white);
  text-transform:uppercase; letter-spacing:.01em;
  margin-bottom:6px;
}
.ia-tool__subtitle{
  font-size:14px; font-weight:600; line-height:1.5;
  color:rgba(230,242,243,.62);
  margin-bottom:clamp(18px,1.8vw,24px);
}

/* — РЕЙТИНГ: строка + игла со светящейся точкой — */
.ia-tool__ratings{
  display:flex; flex-direction:column; gap:13px;
  margin-bottom:clamp(16px,1.6vw,22px);
}
.ia-rate{ position:relative; }
.ia-rate__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:5px;
}
.ia-rate__name{
  font-size:13.5px; font-weight:600;
  color:rgba(230,242,243,.78);
}
.ia-rate__score{
  font-size:14.5px; font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ice-white);
}
/* игла: линия 2px, холодный градиент, остриё с обоих концов */
.ia-rate__needle{
  position:relative;
  height:8px;
  display:flex; align-items:center;
}
.ia-rate__needle::before{
  content:""; width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,
    rgba(95,198,212,0) 0%,
    rgba(95,198,212,.55) 10%,
    rgba(95,198,212,.55) 90%,
    rgba(95,198,212,0) 100%);
}
/* янтарная точка — позиция через data-score, ставит JS */
.ia-rate__dot{
  position:absolute; top:50%;
  left:clamp(3%, var(--pos, 50%), 97%);
  transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 10px rgba(232,148,60,.75), 0 0 3px rgba(232,148,60,.75);
}

/* — Всего — */
.ia-tool__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-top:14px;
  border-top:1px solid rgba(230,242,243,.10);
  margin-bottom:12px;
}
.ia-tool__total-label{
  font-family:var(--font-display);
  font-weight:800; font-size:clamp(19px,1.55vw,25px);
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--ice-white);
}
.ia-tool__total-score{
  font-family:var(--font-display);
  font-size:clamp(25px,2vw,31px); font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ice-white);
  text-shadow:0 0 18px rgba(95,198,212,.5);
}
.ia-tool__total-score small{ font-size:.62em; font-weight:700; color:var(--frost-grey); text-shadow:none; }

/* — проверено — */
.ia-tool__verified{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--glacier);
  margin-bottom:clamp(16px,1.6vw,20px);
}
.ia-tool__verified svg{ width:13px; height:13px; flex-shrink:0; }

/* — кнопка «Перейти в нейронку» — холодное стекло, во всю ширину — */
a.ia-tool__btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  margin-top:auto;
  padding:15px 20px;
  font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ice-white);
  border-radius:14px;
  background:rgba(22,40,42,.42);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-inner);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.ia-tool__btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:3;
  background:linear-gradient(100deg, rgba(95,198,212,0), rgba(95,198,212,.28), rgba(95,198,212,0));
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.4,0,.2,1);
}
a.ia-tool__btn:hover{
  transform:scale(1.02);
  border-color:rgba(95,198,212,.5);
  box-shadow:var(--glass-inner), 0 14px 38px -16px rgba(95,198,212,.45);
  color:var(--ice-white);
}
a.ia-tool__btn:hover::after{ left:130%; }
a.ia-tool__btn:active{ transform:scale(.99); }
a.ia-tool__btn svg{ width:15px; height:15px; color:var(--glacier); }

/* — сноска — */
.ia-tool__note{
  margin-top:12px;
  font-size:11.5px; letter-spacing:.03em;
  color:rgba(159,184,188,.55);
  text-align:center;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  .ia-hero-media__proof .dot{ animation:none; }
  .ia-cattile, .ia-cattile__bg, a.ia-tool__btn{ transition:none; }
}