/* =========================================================================
   Тема «Класична (світла)» у концепції Night Lab: та сама «лабораторія» —
   тонка сітка, бірюзове свічення, скляні картки з кутиком, моно-шрифт для
   службових підписів, — але на світлому фоні й у фірмових кольорах сайту.

   Підключається ПІСЛЯ main.css, лише коли активна тема default
   (див. site_themes() у includes/helpers.php). Шаблони не змінюються.
   Світла тема: --color-ink тут ТЕМНИЙ (колір тексту), тож фони var(--color-ink)
   у main.css лишаються темними — окремих «темних панелей» не потрібно.
   Компоновку hero на весь екран і hero-fit.js ця тема не використовує.
   ========================================================================= */

:root[data-theme="default"] {
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --cl-grid: rgba(0, 124, 147, 0.075);          /* лінії сітки */
  --cl-glow: rgba(0, 167, 199, 0.30);
  --cl-grad: linear-gradient(135deg, #00A7C7, #5B8CFF 55%, #9693E6);
}

/* --- Основа: легке свічення зверху --- */
[data-theme="default"] body {
  background:
    radial-gradient(1000px 520px at 86% -8%, rgba(0, 167, 199, 0.10), transparent 62%),
    radial-gradient(800px 480px at -4% 30%, rgba(150, 147, 230, 0.07), transparent 62%),
    #FFFFFF;
  background-repeat: no-repeat;
}

/* --- Шапка: напівпрозора --- */
[data-theme="default"] .site-header {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
[data-theme="default"] .site-nav a { position: relative; }
[data-theme="default"] .site-nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--color-brand); box-shadow: 0 0 8px var(--cl-glow);
}
@media (max-width: 960px) {
  [data-theme="default"] .site-nav a.is-active::after { left: 4px; right: auto; width: 28px; bottom: 6px; }
}

/* --- Типографіка: службові підписи моно-шрифтом --- */
[data-theme="default"] .eyebrow,
[data-theme="default"] .footer-col-title,
[data-theme="default"] .ad-banner__label,
[data-theme="default"] .calc-total-box__label { font-family: var(--font-mono); }
[data-theme="default"] .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; }
[data-theme="default"] .eyebrow::before { content: "// "; opacity: 0.55; }
[data-theme="default"] .breadcrumb { font-family: var(--font-mono); font-size: 12.5px; }
[data-theme="default"] .price-value,
[data-theme="default"] .calc-type-card__price,
[data-theme="default"] .calc-total-box__value { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* --- Hero: сітка, свічення, градієнтний заголовок --- */
[data-theme="default"] .hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 167, 199, 0.07), rgba(255, 255, 255, 0) 80%);
}
[data-theme="default"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--cl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cl-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 72% 40%, #000 0, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 90% at 72% 40%, #000 0, transparent 72%);
}
[data-theme="default"] .hero h1,
[data-theme="default"] .page-title {
  background: linear-gradient(180deg, #0B1F26 45%, #007C93 150%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Підложка під логотипом у hero: світле «скло» з сіткою, кільцями радара й кутиком --- */
[data-theme="default"] .hero-visual .hero-holo {
  position: relative; overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0, 124, 147, 0.16);
  background:
    radial-gradient(62% 58% at 50% 46%, rgba(0, 167, 199, 0.16), transparent 72%),
    radial-gradient(48% 48% at 92% 100%, rgba(150, 147, 230, 0.16), transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, #EAF7FA 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 50px -30px rgba(0, 124, 147, 0.45);
}
[data-theme="default"] .hero-visual .hero-holo::before {
  inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 46%, transparent 0 62px, rgba(0, 124, 147, 0.12) 63px 64px),
    linear-gradient(rgba(0, 124, 147, 0.07) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(0, 124, 147, 0.07) 1px, transparent 1px) 0 0 / 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 46%, #000 25%, transparent 88%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 46%, #000 25%, transparent 88%);
  filter: none; mix-blend-mode: normal; opacity: 1; animation: none;
}
[data-theme="default"] .hero-visual .hero-holo::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: clamp(48px, 7vw, 96px); aspect-ratio: 1;
  background: var(--cl-grad);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.9;
}
@media (min-width: 901px) {
  [data-theme="default"] .hero .container > .hero-visual { align-self: stretch; }
  [data-theme="default"] .hero-visual .hero-holo { align-self: stretch; width: 100%; aspect-ratio: auto; }
}

/* --- Картки: біле «скло» з крихітною сіткою, кутиком і свіченням при наведенні --- */
[data-theme="default"] .service-card,
[data-theme="default"] .why-card,
[data-theme="default"] a.card,
[data-theme="default"] .price-card:not(.accent) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(0, 167, 199, 0.10), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F6FBFC);
  border-color: rgba(0, 124, 147, 0.14);
  box-shadow: 0 1px 0 #FFFFFF inset, 0 10px 30px -24px rgba(0, 124, 147, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
[data-theme="default"] .service-card[style*="background:#FFFFFF"] { background: linear-gradient(180deg, #FFFFFF, #F6FBFC) !important; }
[data-theme="default"] .service-card > *,
[data-theme="default"] .why-card > * { position: relative; z-index: 1; }
[data-theme="default"] .service-card::before,
[data-theme="default"] .why-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--cl-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cl-grid) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 80%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 80%);
}
[data-theme="default"] .service-card::after,
[data-theme="default"] .why-card::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: 30px; aspect-ratio: 1;
  background: var(--cl-grad);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.85;
}
[data-theme="default"] .service-card:hover,
[data-theme="default"] .why-card:hover,
[data-theme="default"] a.card:hover {
  border-color: rgba(0, 167, 199, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 167, 199, 0.22), 0 20px 44px -22px var(--cl-glow);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="default"] .service-card:hover,
  [data-theme="default"] .why-card:hover,
  [data-theme="default"] a.card:hover { transform: none; }
}
/* цифра-значок «Чому саме ми» — кружок із бірюзовим контуром */
[data-theme="default"] .why-card > div:first-child {
  background: #FFFFFF !important; color: var(--color-brand-dark) !important;
  border: 1px solid rgba(0, 167, 199, 0.5);
  font-family: var(--font-mono) !important; font-size: 14px !important;
  box-shadow: 0 0 0 4px rgba(0, 167, 199, 0.07), 0 0 20px rgba(0, 167, 199, 0.22);
}

/* --- Смуги розділів зі свіченням і сіткою (як за hero) --- */
[data-theme="default"] .why-us,
[data-theme="default"] .services-us { position: relative; isolation: isolate; overflow: hidden; }
[data-theme="default"] .why-us { background: transparent !important; }
[data-theme="default"] .why-us::before,
[data-theme="default"] .services-us::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 260px at 12% 0%, rgba(0, 167, 199, 0.10), transparent 70%),
    radial-gradient(480px 260px at 92% 100%, rgba(150, 147, 230, 0.10), transparent 70%),
    linear-gradient(var(--cl-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--cl-grid) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 30%, transparent 92%);
}
[data-theme="default"] .services-us .service-card .icon-badge { box-shadow: 0 0 18px rgba(0, 167, 199, 0.16); }

/* --- Кнопки --- */
[data-theme="default"] .btn-ghost { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 124, 147, 0.25); }
[data-theme="default"] .btn-ghost:hover { border-color: var(--color-brand); background: var(--color-tint); }

/* Чіпи й вкладки — активний стан зі свіченням */
[data-theme="default"] .chip.active,
[data-theme="default"] .page-dot.active,
[data-theme="default"] .calc-tab.is-active { box-shadow: 0 0 16px -4px var(--cl-glow); }

/* «Чому саме ми»: у main.css у цих карток немає власного оформлення (його дають inline-стилі) */
[data-theme="default"] .why-card {
  padding: 26px 24px 28px; border-radius: 20px; border: 1px solid rgba(0, 124, 147, 0.14);
}
[data-theme="default"] .service-card { border-radius: 20px; }
[data-theme="default"] .service-card h3 { color: var(--color-ink); }


/* ===== Hero на весь перший екран (десктоп і телефон) — та сама компоновка, що в Night Lab ===== */
/* --- Hero на телефоні: перший екран без порожніх місць ---
   Hero займає рівно перший екран (100svh мінус шапка ~69px), а розміри логотипа, заголовка,
   тексту й кнопок ростуть разом з висотою екрана (clamp + svh, з обмеженням по ширині vw), щоб на
   високих телефонах вміст заповнював екран. Решта висоти розподіляється всередині блока: підпис і
   заголовок угорі, кнопки внизу, опис посередині (margin: auto). Копія логотипа (.hero-holo--inline)
   стоїть у абзаці й плаває праворуч (float + shape-outside), тож текст її обтікає. Окремий логотип
   (.hero-visual) на телефоні ховається. Розмітка hero має inline-стилі (gap, flex, font-size, margin),
   тому !important — лише всередині цього медіа-запиту. Планшети, десктоп і світла тема не змінюються.
   Рядки без clamp/svh — запасні значення для старих браузерів. */
@media (max-width: 640px) {
  [data-theme="default"] .hero.hero--home {
    --hm: 90px;                                        /* розмір знака логотипа */
    --hm: clamp(84px, min(30vw, 14.5svh), 124px);
    min-height: calc(100vh - var(--hdr-h, 69px));
    min-height: calc(100svh - var(--hdr-h, 69px));
    display: flex; align-items: stretch;
    padding: 24px 0 24px;
    padding-top: clamp(20px, calc(5svh - 6px), 44px);
  }
  [data-theme="default"] .hero.hero--home > .container { width: 100%; }
  [data-theme="default"] .hero-visual { display: none !important; } /* у блока inline display:flex */

  /* текстовий блок (вже flex-колонка з inline-стилів) тягнеться на всю висоту */
  [data-theme="default"] .hero.hero--home .container > div:first-child { gap: 12px !important; width: 100%; }
  [data-theme="default"] .hero.hero--home h1 {
    font-size: 29px;
    font-size: clamp(28px, min(9vw, 4.4svh), 38px);
    line-height: 1.12 !important;
  }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p {
    font-size: 15px !important;
    font-size: clamp(15px, min(4.4vw, 2.1svh), 17.5px) !important;
    line-height: 1.6 !important;
    margin: auto 0 !important;                          /* опис — посередині вільного місця */
  }

  /* логотип праворуч в абзаці, текст обтікає за формою (коло) */
  [data-theme="default"] .hero.hero--home .hero-holo--inline {
    display: flex; float: right; width: auto; aspect-ratio: auto; padding: 0; gap: 6px;
    margin: 4px 0 8px 14px;
    shape-outside: ellipse(50% 50% at 50% 50%); shape-margin: 10px;
  }
  [data-theme="default"] .hero-holo--inline .hero-holo__mark { width: var(--hm); }
  [data-theme="default"] .hero-holo--inline .hero-holo__word .hero-holo__main { font-size: calc(var(--hm) * 0.25); }
  [data-theme="default"] .hero-holo--inline .hero-holo__word .hero-holo__sub { font-size: calc(var(--hm) * 0.12); margin-top: 3px; }

  /* кнопки внизу блока, в один ряд (на вузьких екранах переносяться) */
  [data-theme="default"] .hero.hero--home .container > div:first-child > div {
    display: flex !important; gap: 10px !important; margin-top: 0 !important;
  }
  [data-theme="default"] .hero.hero--home .container > div:first-child > div > a {
    flex: 1 1 150px; justify-content: center; white-space: nowrap;
    padding: 13px 10px; font-size: 14px;
    padding: clamp(13px, 1.9svh, 17px) 10px; font-size: clamp(14px, 2svh, 15.5px);
  }
}

/* Вищі телефони: ступінчасто крупніший вміст, щоб заповнити зайву висоту без порожніх смуг
   (розмір завжди обмежений шириною екрана — vw — щоб текст не ламався). */
@media (max-width: 640px) and (min-height: 740px) {
  [data-theme="default"] .hero.hero--home { --hm: clamp(84px, min(34vw, 16svh), 140px); }
  [data-theme="default"] .hero.hero--home h1 { font-size: clamp(28px, min(9.6vw, 4.6svh), 36px); }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p { font-size: clamp(15px, min(4.8vw, 2.4svh), 18px) !important; }
}
/* Ширші телефони (від 420 px): ширина дозволяє крупніший опис */
@media (min-width: 420px) and (max-width: 640px) and (min-height: 740px) {
  [data-theme="default"] .hero.hero--home .container > div:first-child > p { font-size: min(4.4vw, 19.5px) !important; }
}
@media (max-width: 640px) and (min-height: 800px) {
  [data-theme="default"] .hero.hero--home { --hm: min(38vw, 150px); }
  [data-theme="default"] .hero.hero--home .container > div:first-child { gap: 14px !important; }
  [data-theme="default"] .hero.hero--home h1 { font-size: min(9.2vw, 37px); }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p { font-size: min(4.8vw, 18.5px) !important; }
  [data-theme="default"] .hero.hero--home .container > div:first-child > div > a { padding: 17px 8px; font-size: 14.5px; }
}
@media (max-width: 640px) and (min-height: 880px) {
  [data-theme="default"] .hero.hero--home { --hm: min(40vw, 170px); }
  [data-theme="default"] .hero.hero--home h1 { font-size: min(9.6vw, 40px); }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p { font-size: min(5.2vw, 20px) !important; }
  [data-theme="default"] .hero.hero--home .container > div:first-child > div > a { padding: 19px 8px; font-size: 15px; }
}


/* --- Hero на десктопі: перший екран заповнено ---
   Hero займає перший екран (100svh мінус шапка), вміст по центру; текстова колонка ширша, логотип
   більший, заголовок і опис крупніші. Тонке підлаштування під конкретну висоту екрана — assets/js/hero-fit.js
   (масштаб текстової колонки). Розмітка hero має inline-стилі (gap, flex, max-width, font-size),
   тому !important — лише всередині цього медіа-запиту. Планшети (≤900px) не змінюються. */
@media (min-width: 901px) {
  [data-theme="default"] .hero.hero--home {
    min-height: calc(100vh - var(--hdr-h, 78px));
    min-height: calc(100svh - var(--hdr-h, 78px));
    display: flex; align-items: center;
    padding: clamp(24px, 6svh, 64px) 0 clamp(24px, 5svh, 56px);
  }
  [data-theme="default"] .hero.hero--home > .container { width: 100%; gap: clamp(32px, 5vw, 80px) !important; }
  [data-theme="default"] .hero.hero--home .container > div:first-child { flex: 1.3 1 0 !important; }
  [data-theme="default"] .hero.hero--home .container > .hero-visual { flex: 1 1 0 !important; }
  [data-theme="default"] .hero.hero--home h1 { font-size: clamp(44px, 4.9vw, 88px); max-width: none !important; line-height: 1.08 !important; }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p { font-size: clamp(17px, 1.45vw, 24px) !important; max-width: 36em !important; }
  [data-theme="default"] .hero.hero--home .container > div:first-child > div > a { padding: 16px 28px; font-size: 15px; }

  /* логотип більший */
  [data-theme="default"] .hero-holo { aspect-ratio: auto; padding: 0; gap: 18px; }
  [data-theme="default"] .hero-holo__mark { width: clamp(180px, 22vw, 340px); }
  [data-theme="default"] .hero-holo__word .hero-holo__main { font-size: clamp(34px, 4vw, 64px); }
  [data-theme="default"] .hero-holo__word .hero-holo__sub { font-size: clamp(14px, 1.6vw, 25px); }
}

/* --- Телефон: опис і логотип у ДВІ колонки з підложкою, як на десктопі ---
   Абзац стає сіткою: зліва текст, справа плашка на всю висоту тексту. Логотип-копія стоїть першою в
   абзаці, але явно ставиться в 2-гу колонку; текст (анонімний елемент сітки) потрапляє в 1-шу.
   Розмір логотипа обмежено ~22% ширини — інакше колонка тексту поруч звужується й слова рвуться. */
@media (max-width: 640px) {
  [data-theme="default"] .hero.hero--home { --hm: clamp(66px, min(22vw, 11svh), 92px); }
  [data-theme="default"] .hero.hero--home .container > div:first-child > p {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    column-gap: 14px;
    align-items: stretch;
  }
  [data-theme="default"] .hero.hero--home .hero-holo--inline {
    float: none; grid-column: 2; grid-row: 1; align-self: stretch; justify-content: center;
    margin: 0; width: auto; shape-outside: none;
    position: relative; overflow: hidden; border-radius: 16px;
    padding: 12px 10px 14px;
    background:
      radial-gradient(62% 52% at 50% 46%, rgba(0, 167, 199, 0.16), transparent 72%),
      linear-gradient(160deg, #FFFFFF 0%, #EAF7FA 100%);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(0, 124, 147, 0.16);
  }
  [data-theme="default"] .hero.hero--home .hero-holo--inline::before {
    display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      linear-gradient(rgba(0, 124, 147, 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
      linear-gradient(90deg, rgba(0, 124, 147, 0.07) 1px, transparent 1px) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 46%, #000 25%, transparent 90%);
    mask-image: radial-gradient(ellipse 85% 80% at 50% 46%, #000 25%, transparent 90%);
    filter: none; mix-blend-mode: normal; opacity: 1; animation: none;
  }
  [data-theme="default"] .hero.hero--home .hero-holo--inline::after {
    content: ""; position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none;
    width: 34px; aspect-ratio: 1;
    background: var(--cl-grad);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.9;
  }
}

/* --- Блоки «Роботи» (.cases-us) і «Блог» (.blog-us) у стилі hero: смуга з сіткою й свіченням, скляні картки з сіткою й кутиком --- */
[data-theme="default"] .cases-us, [data-theme="default"] .blog-us { position: relative; isolation: isolate; overflow: hidden; }
[data-theme="default"] .blog-us { background: transparent !important; }
[data-theme="default"] .cases-us::before, [data-theme="default"] .blog-us::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 260px at 88% 0%, rgba(0, 167, 199, 0.10), transparent 70%),
    radial-gradient(480px 260px at 8% 100%, rgba(150, 147, 230, 0.10), transparent 70%),
    linear-gradient(var(--cl-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--cl-grid) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, #000 30%, transparent 92%);
}
[data-theme="default"] .case-card, [data-theme="default"] .blog-us a.card {
  position: relative; overflow: hidden; display: block;
  border-radius: 20px; border: 1px solid rgba(0, 124, 147, 0.14);
  background: radial-gradient(60% 50% at 20% 0%, rgba(0, 167, 199, 0.10), transparent 70%), linear-gradient(180deg, #FFFFFF, #F6FBFC);
  box-shadow: 0 1px 0 #FFFFFF inset, 0 10px 30px -24px rgba(0, 124, 147, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
[data-theme="default"] .case-card { padding: 12px 12px 20px; }
[data-theme="default"] .case-card .thumb { border-radius: 12px; margin-bottom: 14px !important; }
[data-theme="default"] .case-card > span, [data-theme="default"] .case-card > h3 { display: block; padding: 0 8px; }
[data-theme="default"] .case-card > *, [data-theme="default"] .blog-us a.card > * { position: relative; z-index: 1; }
[data-theme="default"] .case-card::before, [data-theme="default"] .blog-us a.card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--cl-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--cl-grid) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 80%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 80%);
}
[data-theme="default"] .case-card::after, [data-theme="default"] .blog-us a.card::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: 30px; aspect-ratio: 1;
  background: var(--cl-grad); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: 0.85;
}
[data-theme="default"] .case-card:hover, [data-theme="default"] .blog-us a.card:hover {
  border-color: rgba(0, 167, 199, 0.55); box-shadow: 0 0 0 1px rgba(0, 167, 199, 0.22), 0 20px 44px -22px var(--cl-glow); transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="default"] .case-card:hover, [data-theme="default"] .blog-us a.card:hover { transform: none; }
}