/* static/css/services.css - финальная версия с креативом */
:root {
  --accent: #9b5cff;
  --accent-2: #7b3aff;
  --accent-glow: rgba(155,92,255,0.18);
  --text-main: #ffffff;
  --text-sec: #bfcbdc;
  --muted: #9aa6b8;
  --card-bg: rgba(6,4,18,0.6);
}

/* layout */
.services-section { padding: 56px 18px; }
.catalog-header { max-width:1260px; margin:0 auto 12px; text-align:center; }
.premium-title { font-size:2.2rem; color:var(--text-main); margin-bottom:6px; }
.subtitle-text { color:var(--text-sec); margin-bottom:16px; }

/* filters */
.filters-container { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.tab-btn { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text-sec); padding:8px 14px; border-radius:20px; cursor:pointer; transition:all .25s; font-weight:600; }
.tab-btn:hover { color:var(--text-main); transform:translateY(-3px); }
.tab-btn.active { background: linear-gradient(90deg,var(--accent-2),var(--accent)); box-shadow: 0 10px 40px var(--accent-glow); color:#fff; border-color:transparent; }

/* grid */
.services-grid { display:grid; grid-template-columns:1fr; gap:22px; max-width:1260px; margin:0 auto; padding:0 12px; }
@media(min-width:720px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .services-grid{ grid-template-columns:repeat(3,1fr); gap:28px; } }

/* card base */
.card--premium {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 10px 40px rgba(3,2,12,0.6);
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height:340px;
  transition:transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s;
  position:relative;
}

/* creative badge top-left */
.card--premium .card-badge {
  position:absolute;
  left:14px;
  top:14px;
  background: linear-gradient(90deg, rgba(123,58,255,0.18), rgba(155,92,255,0.12));
  color:var(--text-main);
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  font-size:.82rem;
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events:none;
  box-shadow: 0 6px 20px rgba(123,58,255,0.06);
}
.card--premium .card-badge .dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg,var(--accent),var(--accent-2)); margin-right:8px; vertical-align:middle;
}

/* small decorative icon (top-right) */
.card--premium .card-icon {
  position:absolute; right:14px; top:14px; z-index:5; width:36px; height:36px; border-radius:50%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent)); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(155,92,255,0.08);
  transform: translateZ(0);
}

/* hover glow decoration */
.card--premium::before {
  content: '';
  position:absolute; inset: -40% -20% auto -20%; height: 40%;
  background: radial-gradient(closest-side, rgba(155,92,255,0.06), transparent 40%);
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.card--premium:hover::before { opacity:1; }

/* media */
.card-media { height:220px; overflow:hidden; background:linear-gradient(180deg,#0b0711,#12061b); position:relative; }
@media(min-width:1100px){ .card-media{ height:260px; } }
.card-img { width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .7s ease, filter .6s ease, opacity .5s ease; display:block; }
.card--premium:hover .card-img{ transform:scale(1.06); filter:contrast(1.02) saturate(1.05); }
.media-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(2,1,8,0.45)); pointer-events:none; }

/* shimmer on image hover (subtle) */
.card-media::after {
  content: '';
  position:absolute; left:-40%; top:0; width:60%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  transform: skewX(-18deg) translateX(-120%);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  opacity:0;
  pointer-events:none;
}
.card--premium:hover .card-media::after { transform: skewX(-18deg) translateX(160%); opacity:0.65; }

/* body */
.card-body { padding:18px; display:flex; flex-direction:column; justify-content:space-between; flex:1; }
.meta { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; }
.meta-cat { color:var(--text-sec); font-weight:600; border-radius:10px; padding:3px 8px; border:1px solid rgba(255,255,255,0.02); background:transparent; }

/* title/desc - structured for animated reveal */
.card-title { position:relative; font-size:1.05rem; margin:8px 0; font-weight:700; color:var(--text-main); overflow:visible; padding-bottom:6px; }
.card-title .title-inner { display:inline-block; transform:translateY(10px); opacity:0; transition:transform .48s cubic-bezier(.2,.8,.2,1), opacity .48s ease; will-change:transform,opacity; }
.card-title .title-underline { display:block; width:36%; height:3px; margin-top:8px; border-radius:3px; background: linear-gradient(90deg,var(--accent-2),var(--accent)); transform-origin:left center; transform:scaleX(0); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease; opacity:0.95; }

/* description - no underline */
.card-desc { color:var(--text-sec); font-size:.95rem; margin:0; line-height:1.35; max-height:3.6rem; overflow:hidden; transform:translateY(8px); opacity:0; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); text-decoration:none; }

/* footer */
.card-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.price { font-weight:900; color:var(--accent); display:flex; align-items:baseline; gap:8px; text-shadow:0 6px 28px rgba(155,92,255,0.08); text-decoration:none; }
.price-from { color:var(--text-sec); font-size:.82rem; }
.price-value { font-size:1.06rem; letter-spacing:-0.02em; text-decoration:none; }

/* CTA */
.actions .btn-text { color:#fff; font-weight:800; padding:10px 14px; border-radius:12px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); box-shadow:0 8px 26px var(--accent-glow); transition:transform .22s ease, box-shadow .22s ease; }

/* ripple style for CTA */
.btn-ripple {
  position:absolute; border-radius:50%; pointer-events:none; background: rgba(255,255,255,0.12);
  transform: scale(0); animation: ripple 600ms linear;
}
@keyframes ripple { to { transform: scale(1); opacity:0; } }

/* reveal base */
[data-animate]{ opacity:0; transform:translateY(12px) scale(.997); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
[data-animate].in-view{ opacity:1; transform:translateY(0) scale(1); }

/* in-view sequenced reveals using --delay */
.card--premium.in-view .title-inner { opacity:1; transform:translateY(0); transition-delay:var(--delay,0ms); }
.card--premium.in-view .title-underline { transform:scaleX(1); transition-delay:calc(var(--delay,0ms) + 80ms); }
.card--premium.in-view .meta { transform:translateY(0) scale(1); opacity:1; transition-delay:calc(var(--delay,0ms) + 140ms); }
.card--premium.in-view .card-desc { opacity:1; transform:translateY(0); transition-delay:calc(var(--delay,0ms) + 190ms); }
.card--premium.in-view .card-footer .price { transform:translateY(0) scale(1); opacity:1; transition-delay:calc(var(--delay,0ms) + 260ms); }
.card--premium.in-view .actions .btn-text { opacity:1; transform:translateY(0); transition-delay:calc(var(--delay,0ms) + 320ms); }

/* image blur-up */
.card-img.img-loading { filter: blur(12px) saturate(.7); transform:scale(1.02); transition:filter .9s ease, transform .9s ease; }
.card-img.img-loaded { filter: blur(0) saturate(1); transform:scale(1); transition:filter .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }

/* small screens adjustments */
@media (max-width:720px) {
  .card--premium { min-height:auto; }
  .card-media { height:160px; }
  .card-title { font-size:1rem; }
  .tab-btn { padding:7px 10px; }
  .card--premium .card-badge, .card--premium .card-icon { display:none; } /* simplify on mobile */
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card--premium, .card-img { transition:none !important; animation:none !important; transform:none !important; }
  [data-animate] { transition:none !important; transform:none !important; opacity:1 !important; }
}

/* override green items if any */
.kpi-number, .stat-number, .number, .accent-green, .count, .btn-accent { color:var(--accent) !important; text-shadow:0 6px 24px rgba(155,92,255,0.12) !important; }

.no-img-placeholder { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-sec); font-size:40px; }
/* === Убрать подчёркивание у описания / цены / мета внутри карточки === */
.card-link,
.card-link * {
  text-decoration: none !important; /* сбрасываем возможные наследуемые подчеркивания */
  color: inherit !important;        /* сохраняем текущий цвет, чтобы не подсвечивать ссылки */
}

/* если где-то специально подчеркивают description */
.card-link .card-desc,
.card-link .price,
.card-link .meta,
.card-link .meta a,
.card-link .card-desc a {
  text-decoration: none !important;
}

/* Убираем подчёркивание только у описания (если нужно оставить в других местах) */
.card-desc { text-decoration: none !important; }

/* === Убрать только ракету: скрыть контейнер, если в нём ракета, иначе убрать фон/тень === */

/* 1) Современные браузеры: если контейнер содержит .fa-rocket, скрываем весь контейнер */
.card--premium:has(.card-icon .fa-rocket) .card-icon {
  display: none !important;
}

/* 2) Если :has() не поддерживается — скрываем саму иконку ракеты (FA или SVG) */
.card--premium .card-icon i.fa-rocket,
.card--premium .card-icon i.fas.fa-rocket,
.card--premium .card-icon .fa-rocket,
.card--premium .card-icon svg.rocket,
.card--premium .card-icon .rocket {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3) Фолбэк: убираем видимый фон/тень контейнера (чтобы не было пустого кружка),
   но не скрываем контейнер полностью — он остаётся для других иконок/декораций */
.card--premium .card-icon {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 4) Если контейнер реально пуст (нет дочерних элементов) — скрываем его */
.card--premium .card-icon:empty {
  display: none !important;
}

/* 5) Опционно: скрывать контейнер/иконку только на мобильных (если нужно) */
/*
@media (max-width:720px) {
  .card--premium:has(.card-icon .fa-rocket) .card-icon { display:none !important; }
  .card--premium .card-icon .fa-rocket { display:none !important; }
  .card--premium .card-icon { background:transparent !important; box-shadow:none !important; }
}
*/