/* ===========================
   GLOBAL THEME — COLORS
=========================== */

:root {
  --bg-0: #020617;
  --bg-1: #020617;

  --line: rgba(148, 163, 184, .35);
  --line-strong: rgba(148, 163, 184, .55);

  --text: #e5e7ff;
  --text-strong: #ffffff;

  --muted: rgba(233, 239, 255, .72);
  --muted-2: rgba(233, 239, 255, .55);

  --blue: #32a8ff;
  --blue-2: #40bdff;

  --radius: 22px;
  --radius-sm: 14px;

  --shadow: 0 0 0 1px rgba(15,23,42,.9), 0 26px 60px rgba(15,23,42,.85);
}

/* ===========================
   GLOBAL RESET
=========================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, #101325 0%, transparent 55%),
    radial-gradient(900px 700px at 10% 90%, #0b163a 0, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  overflow-x: hidden;
  animation: fadeIn 0.6s ease;
}

html, body{ min-height: 100%; }

/* GLOBAL BG GLOW */

.bg {
  position: fixed;
  inset: -35%;
  background:
    radial-gradient(700px 500px at 50% 0%, rgba(60, 140, 255, .22), transparent 60%),
    radial-gradient(760px 560px at 80% 70%, rgba(0, 180, 255, .14), transparent 65%);
  /* Avoid GPU tiling seams from large blurred fixed layers */
  filter: none;
  z-index: -1;
  transform: translateZ(0);
  will-change: transform;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================
   LAYOUT
=========================== */

.container {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 28px 0 80px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ===========================
   HEADER
=========================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 4vw;
  margin-bottom: 12px;

  background: rgba(5,7,14,.75);
  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(148,163,184,.22);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateZ(0);
}

.brand__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.15));
}

.brand__top {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.6);
}

.brand__name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .08em;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  /*
    ВАЖНО: у некоторых пользователей (другие шрифты/масштаб 110–150%)
    flex-wrap ломал «капсулу» меню и делал активный пункт визуально
    неестественным. Держим элементы в одну строку и даём nav скролл.
  */
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

/* Status pill */

.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(15,23,42,.85);
  border: 1px solid rgba(0,255,122,.35);

  font-size: 12px;
  color: #d9fff2;

  box-shadow: 0 0 14px rgba(22,255,122,.25);
}

.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(22,255,122,.9);
}

/* ===========================
   NAVIGATION
=========================== */

.nav {
  display: flex;
  gap: 6px;

  padding: 3px;
  border-radius: 999px;

  background: rgba(10,16,32,.95);
  border: 1px solid var(--line);

  /*
    Защита от «ломания» хедера на других масштабах/шрифтах:
    если пунктов много или у пользователя масштаб 110–150%,
    навигация аккуратно прокручивается по горизонтали.
  */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* ограничиваем ширину, чтобы меню не раздувало шапку */
  max-width: clamp(340px, 52vw, 860px);
  min-width: 0;
}

.nav::-webkit-scrollbar { display: none; }

.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;

  text-decoration: none;
  color: rgba(226,232,240,.7);

  transition: .22s ease;
  flex: 0 0 auto;
  white-space: nowrap;
}
.nav__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .92;
  transform: translateY(-.5px);
}

.nav__item:hover .nav__icon{
  filter: drop-shadow(0 0 6px rgba(56,189,248,.35));
}

.nav__item.is-active .nav__icon{
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.65));
}


/* на очень узких экранах разрешаем перенос, чтобы не ломать layout */
@media (max-width: 1100px) {
  .header__right { flex-wrap: wrap; }
  .nav {
    max-width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .nav__item { font-size: 13px; padding: 8px 12px; }
}

.nav__item:hover {
  background: rgba(19,29,58,.8);
  color: var(--text-strong);
}

.nav__item.is-active {
  background: linear-gradient(135deg, #38bdf8, #0f172a);
  color: #fff;
  box-shadow: 0 0 10px rgba(56,189,248,.45);
}

/* ===========================
   PROFILE ICON / AVATAR
=========================== */

.profile-icon {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transform: translateZ(0);
}

.profile-icon__circle {
  width: 44px;
  height: 44px;

  border-radius: 50%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(148,163,184,.65);

  box-shadow:
    0 0 0 1px rgba(15,23,42,.9),
    0 10px 30px rgba(15,23,42,.8);

  position: relative;

  transition: .25s ease;
}

.profile-icon__circle:hover {
  transform: scale(1.07);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.9),
    0 18px 40px rgba(15,23,42,.9);
}

/* корректная аватарка */

.profile-icon__circle img,
.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

/* гость */

.profile-icon__glyph {
  font-size: 20px;
  opacity: .75;
}

/* онлайн-точка */

.profile-icon__status-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: #22c55e;

  border: 2px solid #020617;

  box-shadow: 0 0 10px rgba(34,197,94,.9);
}

/* ===========================
   PANELS
=========================== */

.panel {
  padding: 22px;
  border-radius: var(--radius);

  background: rgba(15,23,42,.66);
  border: 1px solid rgba(148,163,184,.28);

  box-shadow:
    0 0 0 1px rgba(15,23,42,.85),
    0 18px 36px rgba(15,23,42,.85);

  animation: fadeIn .7s ease;
}

.panel--hero {
  padding: 28px;
}

.panel__title {
  font-size: 17px;
  margin-bottom: 6px;
}

/* Banner */

.banner img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* ===========================
   SECTIONS
=========================== */

.section {
  margin-top: 40px;
  margin-bottom: 40px;
  animation: fadeIn 1s ease;

  flex: 1;
}

.section__head {
  margin-bottom: 12px;
}

.section__tag {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .15em;
}

/* ===========================
   TYPO
=========================== */

.muted {
  color: var(--muted);
  font-size: 14px;
}

.muted.small {
  font-size: 13px;
}

/* ===========================
   CARDS
=========================== */

.cards {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.card {
  padding: 20px 20px 18px;
  border-radius: var(--radius-sm);

  background: radial-gradient(circle at top left, rgba(148,163,184,.15), rgba(15,23,42,.92));
  border: 1px solid rgba(148,163,184,.35);

  box-shadow:
    0 0 0 1px rgba(15,23,42,.85),
    0 10px 28px rgba(15,23,42,.75);

  transition: .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.85),
    0 18px 40px rgba(15,23,42,.95);
}

.card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Аватар с синим градиентом, как на скрине */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 14px;
  color: #f9fafb;

  background: radial-gradient(circle at 30% 20%, #38bdf8, #0f172a);
  box-shadow: 0 10px 20px rgba(15,23,42,.9);
}

/* Аватар-изображение (админы/профили) */
.avatar--photo {
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(56,189,248,.55), rgba(15,23,42,.92));
  border: 1px solid rgba(148,163,184,.35);
}

.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Бренд-иконки соцсетей */
.avatar--brand {
  border: 1px solid rgba(148,163,184,.35);
}

.avatar--brand svg {
  width: 22px;
  height: 22px;
  fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

.avatar--vk {
  background: radial-gradient(circle at 30% 20%, rgba(92,142,255,.95), rgba(15,23,42,.95));
}

.avatar--tg {
  background: radial-gradient(circle at 30% 20%, rgba(46,172,255,.95), rgba(15,23,42,.95));
}

.avatar--yt {
  background: radial-gradient(circle at 30% 20%, rgba(255,77,77,.95), rgba(15,23,42,.95));
}

.card__name {
  font-weight: 700;
  font-size: 15px;
}

.card__role {
  font-size: 13px;
  color: var(--muted-2);
}

.card__meta {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.card__meta a {
  color: var(--blue-2);
  text-decoration: none;
}

.card__meta a:hover {
  text-decoration: underline;
}

/* Плашки под Telegram (Buff163, P2P и т.д.) */

.chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 4px 12px;
  border-radius: 999px;

  background: rgba(15,23,42,.96);
  border: 1px solid rgba(148,163,184,.45);

  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);

  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(15,23,42,.8);
}

/* ===========================
   BUTTONS
=========================== */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;

  text-decoration: none;
  font-size: 14px;

  transition: .25s ease;
}

.btn--primary {
  background: linear-gradient(135deg, #38bdf8, #0b1120);
  color: #fff;
  box-shadow: 0 0 12px rgba(56,189,248,.35);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(56,189,248,.55);
}

.btn--ghost {
  background: rgba(15,23,42,.55);
  border: 1px solid var(--line);
  color: var(--text);
}

.btn--ghost:hover {
  background: rgba(18,28,54,.75);
}

/* ===========================
   FOOTER
=========================== */

.footer {
  margin-top: 60px;
  padding-top: 28px;
  padding-bottom: 60px;

  text-align: center;
  font-size: 14px;
  color: var(--muted);

  border-top: 1px solid rgba(148,163,184,.28);
}

/* ===========================
   MODAL AUTH
=========================== */

#authModal {
  position: fixed;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  z-index: 999;

  background: rgba(0,0,0,.65);
  backdrop-filter: blur(12px);
}

.modal__content {
  width: min(560px, 92vw);

  padding: 28px;
  border-radius: var(--radius);

  background: rgba(15,23,42,.96);
  border: 1px solid var(--line-strong);

  box-shadow: var(--shadow);

  position: relative;

  animation: fadeIn .45s ease;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 26px;
  height: 26px;

  border-radius: 50%;
  background: rgba(26,32,52,.9);

  border: 1px solid rgba(148,163,184,.7);

  cursor: pointer;
  transition: .2s;
}

.modal__close:hover {
  background: rgba(36,42,62,1);
}

/* provider buttons */

.auth-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;

  margin-right: 10px;
  margin-bottom: 12px;

  text-decoration: none;

  font-size: 14px;

  border: 1px solid rgba(148,163,184,.45);
  color: var(--text);

  transition: .2s ease;
}

.auth-steam { background: rgba(0,112,190,.3); }
.auth-tg    { background: rgba(0,140,255,.3); }

.auth-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.15);
}

/* email login */

.email-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.email-form input {
  flex: 1;
  padding: 12px;

  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.4);

  background: rgba(15,23,42,.6);
  color: var(--text);
}

.email-form button {
  padding: 12px 16px;

  border-radius: 10px;
  border: none;

  background: var(--blue);
  color: #fff;

  cursor: pointer;
  transition: .25s;
}

.email-form button:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* ===========================
   HEADER AVATAR HARD FIX
=========================== */

.profile-icon {
  width: 38px;
  height: 38px;
}

/* любой аватар внутри кнопки профиля */
.profile-icon img,
.header img[alt="avatar"],
.profile-avatar-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* сама кнопка профиля */
.header .profile-icon {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}

/* кружок вокруг аватарки */
.header .profile-icon__circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ЛЮБОЕ изображение аватара в шапке */
.header .profile-icon img,
.header img.profile-avatar-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;

  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* END */

.card--service .chips {
    margin-bottom: 18px;
}

/* Базовая анимация для всех кнопок */
.btn {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    background 0.16s ease-out,
    opacity 0.16s ease-out;
}

/* Эффект нажатия (как физическая кнопка) */
.btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  opacity: 0.95;
}

/* Лёгкий «флэш» при клике */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at center,
              rgba(255, 255, 255, 0.35) 0,
              rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

.btn:active::after {
  opacity: 0.9;
  transform: scale(1.15);
}

/* Article typography tuning */
.article-body{
  max-width: 78ch;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(226,232,240,.92);
  hyphens: auto;
  text-wrap: pretty;
}
.article-body p{margin:0 0 14px;}
.article-body h2,.article-body h3{margin:26px 0 12px; line-height:1.25;}

/* ===========================
   PREMIUM BACKGROUND LAYERS
=========================== */

body::before,
body::after{
  content:"";
  position: fixed;
  inset: -10% -10% -10% -10%;
  pointer-events:none;
  z-index:-2;
}
body::before{
  background:
    radial-gradient(700px 520px at 6% 22%, rgba(63, 134, 255, .18), transparent 60%),
    radial-gradient(640px 520px at 96% 32%, rgba(0, 210, 255, .14), transparent 62%),
    radial-gradient(720px 560px at 88% 86%, rgba(120, 68, 255, .12), transparent 60%);
  /* Avoid GPU tiling seams from large blurred fixed layers */
  filter: none;
}
body::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 30%, transparent 70%, rgba(255,255,255,.035)),
    radial-gradient(1100px 520px at 50% -10%, rgba(50, 170, 255, .08), transparent 65%);
  mix-blend-mode: screen;
}

.bg-grid{
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .18;
  mask-image: radial-gradient(140% 120% at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 52%, rgba(0,0,0,.45) 78%, transparent 100%);
  mask-repeat: no-repeat;
pointer-events:none;
  z-index:-1;
  transform: translateZ(0);
  will-change: transform;
}

.bg-graph{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 30% 10%, rgba(50,168,255,.10), transparent 65%),
    radial-gradient(900px 500px at 70% 90%, rgba(0,220,255,.08), transparent 65%),
    linear-gradient(120deg, transparent 0%, rgba(50,168,255,.08) 32%, transparent 60%),
    linear-gradient(240deg, transparent 0%, rgba(120,68,255,.06) 28%, transparent 55%);
  opacity: .85;
  pointer-events:none;
  z-index:-1;
  transform: translateZ(0);
  will-change: transform;
}

.bg-noise{
  position: fixed;
  inset: 0;
  opacity: .08;
  pointer-events:none;
  z-index:-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  transform: translateZ(0);
  will-change: transform;
}

/* ===========================
   REVIEWS: avatar consistency
=========================== */

html[data-page="reviews"] .cards.grid-3{
  /* explicit 3-col grid with equal tracks */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
html[data-page="reviews"] .card--review{
  height: 100%;
  display: flex;
  flex-direction: column;
  /* reset any accidental active/center styles from older experiments */
  transform: none;
}
html[data-page="reviews"] .card--review:hover{
  /* keep the same hover as regular .card (no special center scaling) */
  transform: translateY(-4px);
}
html[data-page="reviews"] .card--review .card__top{
  justify-content: space-between !important;
  align-items: center !important;
}
html[data-page="reviews"] .card--review > p.muted{
  margin-top: 12px;
  line-height: 1.45;
  /* keep cards visually consistent even with long text */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
html[data-page="reviews"] .card--review .media,
html[data-page="reviews"] .card--review .gi-imgwrap{
  margin-top: 14px;
}
/* Fallback: if JS didn't wrap an image for any reason, force the same 16:9 preview box */
html[data-page="reviews"] .card--review .media{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120,255,255,.12);
  background: rgba(10,18,24,.40);
  box-shadow: 0 16px 52px rgba(0,0,0,.42);
}
html[data-page="reviews"] .card--review .media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
html[data-page="reviews"] .card--review .media__caption{
  margin-top: auto;
  padding-top: 12px;
  opacity: .78;
}

@media (max-width: 980px){
  html[data-page="reviews"] .cards.grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  html[data-page="reviews"] .cards.grid-3{ grid-template-columns: 1fr; }
}



.review-user{ gap: 12px; }
.review-user__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(80,200,255,.06) inset;
}
.review-user__avatar img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

@media (max-width: 560px){
  .review-user__avatar{ width: 40px; height: 40px; border-radius: 999px; }
}

/* ===========================
   ARTICLE COVER: portrait-safe 16:9
=========================== */

.article-cover{
  position: relative;
}

/* If cover is portrait, keep 16:9 frame but use blurred backdrop + contain */
.article-cover.is-cover-portrait{
  background: rgba(255,255,255,.02);
}
.article-cover.is-cover-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background-image: var(--gi-cover-src);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.15) brightness(.92);
  transform: scale(1.08);
  opacity: .65;
}
.article-cover.is-cover-portrait img{
  object-fit: contain !important;
  background: transparent;
  position: relative;
  z-index: 1;
}
.article-cover.is-cover-portrait .article-cover__glow{ opacity: .55; position: absolute; z-index: 2; }


/* ===========================
   HERO (ARTICLES/TOOLS)
=========================== */

.hero{
  position: relative;
  overflow: hidden;
  padding: 28px;
  /* Make the hero feel like one unified premium block (fix sharp artifacts on edges) */
  border-radius: var(--radius);
  background: rgba(15,23,42,.42);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 0 0 1px rgba(15,23,42,.65), 0 22px 52px rgba(0,0,0,.42);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 260px at 18% 10%, rgba(50,168,255,.20), transparent 60%),
    radial-gradient(520px 280px at 90% 70%, rgba(0,220,255,.14), transparent 60%),
    radial-gradient(560px 320px at 60% 110%, rgba(120,68,255,.10), transparent 60%);
  filter: blur(14px);
  opacity: .9;
}
.hero > *{ position: relative; }
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.42);
  color: rgba(233,239,255,.75);
  letter-spacing: .14em;
  font-size: 11px;
  text-transform: uppercase;
}
.hero__title{
  margin: 14px 0 6px;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: .02em;
}
.hero__desc{
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}

/* ===========================
   ARTICLE CARDS
=========================== */

.card--article{
  padding: 0;
  overflow: hidden;
}
.card__media{
  position: relative;
  display:block;
  height: 170px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  overflow:hidden;
}
.card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s ease;
  filter: saturate(1.05) contrast(1.05);
}
.card__shine{
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px 180px at 30% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(120deg, transparent 0, rgba(50,168,255,.14) 30%, transparent 60%);
  opacity: .55;
  mix-blend-mode: screen;
}
.card--article:hover .card__media img{ transform: scale(1.08); }
.card__body{ padding: 16px 18px 18px; }

/* ===========================
   ARTICLE PAGE TYPOGRAPHY
=========================== */

.article-shell{ padding: 26px; }
.article-head{ margin-top: 14px; }
.article-title{
  margin: 12px 0 6px;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .01em;
  line-height: 1.15;
}
.article-date{ margin-bottom: 14px; }
.article-cover{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
}
.article-cover img{
  width:100%;
  height: clamp(220px, 34vh, 360px);
  object-fit: cover;
  display:block;
  filter: saturate(1.06) contrast(1.05);
}
.article-cover__glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 280px at 30% 0%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(700px 280px at 90% 90%, rgba(50,168,255,.12), transparent 64%);
  opacity:.6;
  mix-blend-mode: screen;
  pointer-events:none;
}

.article-body{
  max-width: 78ch;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(226,232,240,.92);
  text-wrap: pretty;
  hyphens: auto;
}
.article-body p{ margin: 0 0 14px; }
.article-body h2{ margin: 26px 0 12px; font-size: 22px; line-height:1.25; color: var(--text-strong); }
.article-body h3{ margin: 20px 0 10px; font-size: 18px; line-height:1.25; color: var(--text-strong); opacity:.95; }
.article-body ul, .article-body ol{ margin: 0 0 14px 18px; }
.article-body blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(50,168,255,.8);
  background: rgba(2,6,23,.32);
  border-radius: 14px;
  color: rgba(233,239,255,.86);
}
.article-body a{ color: #68d7ff; text-decoration: none; border-bottom: 1px dashed rgba(104,215,255,.45); }
.article-body a:hover{ border-bottom-color: rgba(104,215,255,.9); }

.article-figure{
  margin: 18px 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.32);
}
.article-figure img{ width:100%; height:auto; display:block; }
.article-figure figcaption{
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(233,239,255,.65);
}

@media (max-width: 720px){
  .article-cover img{ height: 220px; }
  .article-shell{ padding: 18px; }
}

/* ===========================
   TOOLS GRID
=========================== */

.tools-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px){ .tools-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .tools-grid{ grid-template-columns: 1fr; } }

.tool{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(7, 12, 26, .55);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, border-color .2s ease;
}
.tool:hover{ transform: translateY(-2px); border-color: rgba(50,168,255,.55); }
.tool__banner{ position:relative; height: 170px; overflow:hidden; }
.tool__banner img{ width:100%; height:100%; object-fit: cover; filter: saturate(1.08) contrast(1.06); transform: scale(1.02); transition: transform .5s ease; }
.tool:hover .tool__banner img{ transform: scale(1.08); }
.tool__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 0%, rgba(2,6,23,.78) 92%); }
.tool__badge{
  position:absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.45);
  font-size: 12px;
  letter-spacing: .06em;
}
.tool__body{ padding: 14px 16px 16px; }
.tool__name{ font-size: 16px; font-weight: 800; letter-spacing:.01em; }
.tool__desc{ margin-top: 6px; color: rgba(233,239,255,.75); }
.tool__foot{ margin-top: 12px; display:flex; align-items:center; justify-content: space-between; }
.promo{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.30);
  font-size: 13px;
}

/* ===========================
   ADMIN PANEL
=========================== */

body.admin .container{ padding-top: 26px; }
.header--admin{ margin-bottom: 6px; }
.nav--admin .nav__item{ padding: 10px 14px; }
.section--admin{ padding-top: 6px; }

.h1{ margin: 0; font-size: 28px; letter-spacing: .01em; }

.admin-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-head__right{ display:flex; gap: 10px; flex-wrap: wrap; }

.admin-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 980px){ .admin-hero{ grid-template-columns: 1fr; } }

.admin-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 720px){ .admin-actions{ grid-template-columns: 1fr; } }

.card-link{
  display:block;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7, 12, 26, .55);
  box-shadow: var(--shadow);
  text-decoration:none;
  color: inherit;
}
.card-link__title{ font-weight: 900; letter-spacing: .01em; margin-bottom: 6px; }
.card-link__desc{ color: rgba(233,239,255,.72); }

.admin-me{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7, 12, 26, .55);
  box-shadow: var(--shadow);
}
.admin-me__ava{ width: 46px; height: 46px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); }
.admin-me__name{ font-weight: 900; }
.admin-me__sub{ color: rgba(233,239,255,.7); font-size: 13px; }

.tip{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.28);
}
.tip__title{ font-weight: 900; margin-bottom: 8px; }

.table{
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  overflow:hidden;
  background: rgba(7, 12, 26, .50);
  box-shadow: var(--shadow);
}
.table__row{
  display:grid;
  grid-template-columns: 1.2fr .35fr .6fr .55fr .9fr;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  align-items:center;
}
.table__row--head{ background: rgba(2,6,23,.35); color: rgba(233,239,255,.72); font-size: 12px; letter-spacing:.12em; text-transform: uppercase; }
.table__actions{ display:flex; gap: 10px; justify-content:flex-end; flex-wrap: wrap; }
.t-title{ font-weight: 900; }
.t-sub{ font-size: 13px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }

@media (max-width: 980px){
  .table__row{ grid-template-columns: 1fr; }
  .table__actions{ justify-content:flex-start; }
}

.form{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7, 12, 26, .55);
  box-shadow: var(--shadow);
}
.form__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px){ .form__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .form__grid{ grid-template-columns: 1fr; } }

.field{ display:block; margin-top: 14px; }
.field__label{ display:block; font-size: 12px; letter-spacing:.12em; text-transform: uppercase; color: rgba(233,239,255,.75); margin-bottom: 8px; }
.field__hint{ display:block; margin-top: 8px; color: rgba(233,239,255,.58); font-size: 13px; }
.field__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.field--check{ display:flex; align-items:center; gap: 12px; }

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.45);
  color: var(--text);
  outline: none;
}
.input:focus{ border-color: rgba(50,168,255,.7); box-shadow: 0 0 0 4px rgba(50,168,255,.12); }

.alert{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 80, 80, .35);
  background: rgba(120, 20, 30, .22);
  margin-bottom: 14px;
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(148,163,184,.18); background: rgba(50,168,255,.18); color: var(--text-strong); text-decoration:none; cursor:pointer; }
.btn--ghost{ background: rgba(2,6,23,.30); }
.btn--danger{ background: rgba(255,80,80,.14); border-color: rgba(255,80,80,.25); }

.badge{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.30); font-size: 12px; }
.badge--ok{ border-color: rgba(50,168,255,.45); background: rgba(50,168,255,.10); }
.badge--muted{ opacity: .8; }

.form__actions{ display:flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cover-mini{ width: 70px; height: 44px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(148,163,184,.18); }
.banner-preview{ width:100%; max-height: 260px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(148,163,184,.18); }

/* Rich text editor */
.rte-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.32);
}
.rte-btn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7,12,26,.45);
  color: var(--text);
  cursor:pointer;
}
.rte-sep{ width: 1px; background: rgba(148,163,184,.18); margin: 0 4px; }
.rte-upload{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.18); background: rgba(7,12,26,.45); cursor:pointer; }

.rte{
  margin-top: 10px;
  min-height: 360px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.28);
  outline: none;
}
.rte:focus{ border-color: rgba(50,168,255,.7); box-shadow: 0 0 0 4px rgba(50,168,255,.10); }

/* ===========================
   SMALL FIX: HEADER NAV WRAP
=========================== */

.nav{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar{ height: 0; }


.avatar--yt img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}


/* Fix subtle seam on short pages (articles/tools/article) */
html[data-page="articles"],
html[data-page="tools"],
html[data-page="article"]{ background: none; }
html[data-page="articles"] body,
html[data-page="tools"] body,
html[data-page="article"] body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #101325 0%, transparent 55%),
    radial-gradient(900px 700px at 10% 90%, #0b163a 0, transparent 60%),
    radial-gradient(900px 600px at 90% 55%, rgba(56,189,248,.14), transparent 62%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
html[data-page="articles"] .bg-grid,
html[data-page="tools"] .bg-grid{ opacity:.14; }

/* Inline images & galleries inside article body */
.article-body img{ max-width:100%; }
.article-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0; }
.article-gallery .article-figure{ margin:0; }
@media (max-width: 720px){ .article-gallery{ grid-template-columns:1fr; } }

/* =============================
   TELEPORT (services -> Telegram)
   ============================= */
.teleport{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0);
}
.teleport.is-on{ opacity: 1; }

.teleport__vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(36,180,255,.18), rgba(0,0,0,.72) 70%),
    radial-gradient(35% 35% at 20% 25%, rgba(120,70,255,.12), rgba(0,0,0,0) 60%),
    radial-gradient(40% 40% at 80% 70%, rgba(0,255,190,.10), rgba(0,0,0,0) 60%);
}

.teleport__core{
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(90,210,255,.55) 20%, rgba(10,40,110,.22) 45%, rgba(0,0,0,0) 70%);
  box-shadow:
    0 0 0 1px rgba(120,200,255,.15) inset,
    0 35px 120px rgba(0,160,255,.12);
  opacity: 0;
}

.teleport__sparks{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 65% 30%, rgba(255,255,255,.8), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 35% 70%, rgba(255,255,255,.85), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 78% 62%, rgba(255,255,255,.7), rgba(255,255,255,0));
  opacity: 0;
  filter: blur(.2px);
}

.teleport__scan{
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(110,210,255,.0) 0px,
      rgba(110,210,255,.0) 10px,
      rgba(110,210,255,.06) 11px,
      rgba(110,210,255,.0) 13px
    );
  mix-blend-mode: screen;
}

.teleport__label{
  display:none;
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
}
.teleport__title{
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(226,245,255,.92);
}
.teleport__sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(200,230,255,.70);
}

.teleport.is-on.teleport--soft .teleport__core{ animation: tp_soft 520ms cubic-bezier(.2,.85,.2,1) forwards; }
.teleport.is-on.teleport--soft .teleport__scan{ animation: tp_scan_soft 520ms ease-out forwards; }

.teleport.is-on.teleport--blue .teleport__core{ animation: tp_core 950ms ease-out forwards; }
.teleport.is-on.teleport--blue .teleport__label{ animation: tp_label 950ms ease-out forwards; }

.teleport.is-on.teleport--sparks .teleport__core{ animation: tp_core 950ms ease-out forwards; }
.teleport.is-on.teleport--sparks .teleport__sparks{ animation: tp_sparks 950ms ease-out forwards; }
.teleport.is-on.teleport--sparks .teleport__label{ animation: tp_label 950ms ease-out forwards; }

.teleport.is-on.teleport--warp .teleport__core{ animation: tp_warp 950ms ease-out forwards; }
.teleport.is-on.teleport--warp .teleport__scan{ animation: tp_scan 950ms ease-out forwards; }
.teleport.is-on.teleport--warp .teleport__label{ animation: tp_label 950ms ease-out forwards; }

.teleport.is-on.teleport--pulse .teleport__core{ animation: tp_pulse 950ms ease-out forwards; }
.teleport.is-on.teleport--pulse .teleport__label{ animation: tp_label 950ms ease-out forwards; }

.teleport.is-on.teleport--scan .teleport__core{ animation: tp_core 950ms ease-out forwards; }
.teleport.is-on.teleport--scan .teleport__scan{ animation: tp_scan 950ms ease-out forwards; }
.teleport.is-on.teleport--scan .teleport__label{ animation: tp_label 950ms ease-out forwards; }

@keyframes tp_soft{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.82); filter: blur(10px); }
  35%  { opacity: .65; transform: translate(-50%,-50%) scale(1.04); filter: blur(1px); }
  70%  { opacity: .2; transform: translate(-50%,-50%) scale(1.14); filter: blur(6px); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.22); filter: blur(12px); }
}

@keyframes tp_scan_soft{
  0%   { opacity: 0; transform: translateY(-6%); }
  35%  { opacity: .22; }
  100% { opacity: 0; transform: translateY(6%); }
}

@keyframes tp_core{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.65); filter: blur(8px); }
  22%  { opacity: .85; transform: translate(-50%,-50%) scale(1.03); filter: blur(0px); }
  65%  { opacity: .95; transform: translate(-50%,-50%) scale(1.28); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); filter: blur(10px); }
}

@keyframes tp_pulse{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.55); filter: blur(10px); }
  18%  { opacity: .95; transform: translate(-50%,-50%) scale(1.08); filter: blur(0px); }
  40%  { opacity: .85; transform: translate(-50%,-50%) scale(.92); }
  70%  { opacity: .95; transform: translate(-50%,-50%) scale(1.40); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.72); filter: blur(12px); }
}

@keyframes tp_warp{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.62) rotate(-10deg); filter: blur(10px); }
  24%  { opacity: .92; transform: translate(-50%,-50%) scale(1.05) rotate(0deg); filter: blur(0px); }
  60%  { opacity: .95; transform: translate(-50%,-50%) scale(1.45) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.80) rotate(14deg); filter: blur(12px); }
}

@keyframes tp_sparks{
  0%   { opacity: 0; transform: scale(.98); }
  20%  { opacity: .85; }
  55%  { opacity: .55; transform: scale(1.02); }
  100% { opacity: 0; }
}

@keyframes tp_scan{
  0%   { opacity: 0; transform: translateY(-6%); }
  18%  { opacity: .55; }
  55%  { opacity: .28; transform: translateY(6%); }
  100% { opacity: 0; }
}

@keyframes tp_label{
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  24%  { opacity: .85; transform: translateX(-50%) translateY(0px); }
  80%  { opacity: .75; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
  .teleport, .teleport *{ animation: none !important; }
  .teleport{ display:none !important; }
}


/* ============================
   GI LIGHTBOX + PREMIUM MEDIA
   ============================ */


/* Article cover: 16:9 premium */
.article-cover{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(120, 255, 255, .14);
  background: rgba(10, 18, 24, .55);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  aspect-ratio: 16 / 9;
  --gi-cover-src: none;
}
.article-cover::before{
  /* Always show cover fully (no crop), fill space with blurred backdrop */
  content:"";
  position:absolute;
  inset:-12px;
  z-index: 0;
  background-image: var(--gi-cover-src);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.15) brightness(.92);
  transform: scale(1.08);
  opacity: .62;
}
.article-cover img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  background: transparent;
}
.article-cover::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(0,255,255,.10), transparent 55%),
    linear-gradient(120deg, rgba(0,255,255,.08), transparent 55%);
  mix-blend-mode: screen;
  opacity:.9;
  z-index: 2;
}

/* Inline images within article content */
.article-body img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wrapper injected by JS */
.gi-imgwrap{
  position: relative;
  margin: 18px auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120,255,255,.12);
  background: rgba(10,18,24,.40);
  box-shadow: 0 16px 52px rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  --gi-src: none;
}
.gi-imgwrap img{
  width: 100%;
  height: 100%;
  display:block;
}
.gi-imgwrap.is-wide{
  aspect-ratio: 16 / 9;
  max-width: min(980px, 100%);
}
.gi-imgwrap.is-wide::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index: 0;
  background-image: var(--gi-src);
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.15) brightness(.92);
  transform: scale(1.08);
  opacity: .62;
}
.gi-imgwrap.is-wide img{ object-fit: contain; position: relative; z-index: 1; }

/* Reviews: keep proof screenshots consistent (avoid huge 9:16 cards) */
.gi-imgwrap.is-review{
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 260px;
}
.gi-imgwrap.is-review::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image: var(--gi-src);
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.15) brightness(.92);
  transform: scale(1.08);
  opacity: .60;
}
.gi-imgwrap.is-review img{
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.gi-imgwrap.is-story{
  aspect-ratio: 9 / 16;
  max-width: min(520px, 100%);
  max-height: 78vh;
}
.gi-imgwrap.is-story img{
  object-fit: contain;
}

.gi-imgwrap.is-tall,
.gi-imgwrap.is-square{
  max-width: min(780px, 100%);
  max-height: 72vh;
}
.gi-imgwrap.is-tall img,
.gi-imgwrap.is-square img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gi-imgwrap.is-tall{ height: auto; }
.gi-imgwrap.is-square{ height: auto; }

.gi-imgwrap::after{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0,255,255,.10), transparent 55%),
    radial-gradient(700px 240px at 50% 0%, rgba(0,255,255,.12), transparent 65%);
  opacity:.75;
}

/* Cursor hint for zoom */
.gi-imgwrap,
.article-cover{
  cursor: zoom-in;
}

/* Case thumbs: keep the same premium density as reviews (avoid huge scale) */
.case-thumbs{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.case-thumbs .gi-imgwrap{
  margin: 0;
}
.case-thumb{
  width: 100%;
  height: 100%;
  display:block;
}

/* Lightbox overlay */
.gi-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.gi-lightbox.is-open{ display:flex; }
.gi-lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gi-lightbox__stage{
  position: relative;
  width: min(1100px, 100%);
  max-height: calc(100vh - 64px);
  border-radius: 18px;
  border: 1px solid rgba(120,255,255,.16);
  background: rgba(9, 15, 22, .55);
  box-shadow: 0 26px 80px rgba(0,0,0,.58);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gi-lightbox__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}
.gi-lightbox__btn{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(120,255,255,.18);
  background: rgba(10,18,24,.55);
  color: rgba(200,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.gi-lightbox__btn:hover{
  background: rgba(10,18,24,.72);
}
.gi-lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(120,255,255,.16);
  background: rgba(10,18,24,.45);
  color: rgba(210,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.gi-lightbox__nav:hover{ background: rgba(10,18,24,.68); }
.gi-lightbox__nav--prev{ left: 10px; }
.gi-lightbox__nav--next{ right: 10px; }
.gi-lightbox__counter{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(120,255,255,.14);
  background: rgba(10,18,24,.45);
  color: rgba(210,255,255,.9);
  font-size: 12px;
  letter-spacing: .3px;
}

/* Mobile tweaks */
@media (max-width: 720px){
  .gi-lightbox{ padding: 14px; }
  .gi-lightbox__nav{ width: 44px; height: 58px; }
  .gi-lightbox__stage{ border-radius: 16px; }
}

/* ============================
   TELEPORT REDIRECT OVERLAY
   Toggle with: const TELEPORT_STYLE = 1|2|3|4 in site.js
   ============================ */
.gi-teleport{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  pointer-events: none;
}
.gi-teleport.is-on{
  display:block;
  pointer-events: auto;
}
.gi-teleport__back{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity:0;
  transition: opacity .18s ease, backdrop-filter .25s ease;
}
.gi-teleport.is-on .gi-teleport__back{
  opacity:1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gi-teleport__fx{
  position:absolute; inset: -20%;
  opacity:0;
  transform: translateY(22px);
}

.gi-teleport__spark{
  position:absolute;
  left:-30%;
  top: 34%;
  width: 160%;
  height: 2px;
  opacity: 0;
  transform: translateX(-45%) rotate(-12deg);
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.05) 18%, rgba(0,255,255,.55) 50%, rgba(0,255,255,.05) 82%, transparent);
  filter: drop-shadow(0 0 10px rgba(0,255,255,.35)) drop-shadow(0 0 24px rgba(0,255,255,.22));
}
.gi-teleport__spark::after{
  content: "";
  position:absolute;
  top: 50%;
  left: 18%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(0,255,255,.85) 40%, rgba(0,255,255,0) 72%);
  box-shadow: 0 0 22px rgba(0,255,255,.55), 0 0 44px rgba(0,255,255,.25);
}
.gi-teleport.is-on .gi-teleport__spark{
  opacity: 1;
  animation: giSparkLine 760ms cubic-bezier(.2,.9,.2,1) forwards;
}
.gi-teleport.is-on .gi-teleport__spark::after{
  animation: giSparkDot 760ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes giSparkLine{
  0%{ transform: translateX(-55%) rotate(-12deg); opacity: 0; }
  15%{ opacity: 1; }
  100%{ transform: translateX(55%) rotate(-12deg); opacity: .92; }
}
@keyframes giSparkDot{
  0%{ left: 18%; opacity: 0; }
  15%{ opacity: 1; }
  100%{ left: 82%; opacity: 0; }
}
.gi-teleport.is-on .gi-teleport__fx{
  opacity:1;
  transform: translateY(0);
}
.gi-teleport__label{
  position:absolute;
  left: 24px;
  bottom: 22px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(120,255,255,.16);
  background: rgba(10,18,24,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(220,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.gi-teleport__title{ font-weight: 700; letter-spacing:.6px; font-size: 13px; }
.gi-teleport__sub{ font-size: 12px; opacity: .78; margin-top: 2px; }

/* STYLE 1 — Glass Slide + Blur */
.gi-teleport.style-1 .gi-teleport__fx{
  background:
    radial-gradient(900px 360px at 50% 110%, rgba(0,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,255,255,.10), transparent 45%);
  transition: transform .58s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.gi-teleport.style-1.is-on .gi-teleport__fx{ transform: translateY(0); }
.gi-teleport.style-1 .gi-teleport__fx::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 40%, rgba(0,255,255,.22), transparent 62%);
  transform: translateX(-35%);
  animation: giSweep 680ms cubic-bezier(.2,.9,.2,1) forwards;
  opacity:.85;
}
@keyframes giSweep{
  to{ transform: translateX(35%); }
}

/* STYLE 2 — Diagonal Glass Wipe */
.gi-teleport.style-2 .gi-teleport__fx{
  background:
    linear-gradient(135deg, rgba(0,255,255,.22), rgba(0,0,0,0) 55%),
    radial-gradient(900px 380px at 70% 50%, rgba(0,255,255,.16), transparent 60%);
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path .62s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
.gi-teleport.style-2.is-on .gi-teleport__fx{
  clip-path: polygon(0 100%, 100% 0, 120% 20%, 20% 120%);
  opacity:1;
}

/* STYLE 3 — Iris Glow */
.gi-teleport.style-3 .gi-teleport__fx{
  background:
    radial-gradient(circle at 50% 55%, rgba(0,255,255,.28), transparent 52%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.08), transparent 62%);
  transform: scale(.92);
  transition: transform .68s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
.gi-teleport.style-3.is-on .gi-teleport__fx{ transform: scale(1.06); }

/* STYLE 4 — Split Panels */
.gi-teleport.style-4 .gi-teleport__fx{
  background: transparent;
  opacity:1;
  transform:none;
}
.gi-teleport.style-4 .gi-teleport__fx::before,
.gi-teleport.style-4 .gi-teleport__fx::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width: 52%;
  background:
    radial-gradient(900px 360px at 50% 50%, rgba(0,255,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,18,24,.70), rgba(10,18,24,.28));
  border: 1px solid rgba(120,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
}
.gi-teleport.style-4 .gi-teleport__fx::before{
  left: -58%;
  border-radius: 0 22px 22px 0;
  transition: transform .62s cubic-bezier(.2,.9,.2,1);
}
.gi-teleport.style-4 .gi-teleport__fx::after{
  right: -58%;
  border-radius: 22px 0 0 22px;
  transition: transform .62s cubic-bezier(.2,.9,.2,1);
}
.gi-teleport.style-4.is-on .gi-teleport__fx::before{ transform: translateX(58%); }
.gi-teleport.style-4.is-on .gi-teleport__fx::after{ transform: translateX(-58%); }


/* === Tools page cards === */
.card--tool .tool-promo{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 2px;
}
.card--tool .tool-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
}
.card--tool .js-copy{
  padding: 8px 12px;
  font-weight: 600;
}