/* ===== base.css ===== */
:root {
  --bg: #070912;
  --bg-secondary: #0d1120;
  --surface: rgba(18, 23, 40, 0.82);
  --surface-strong: rgba(14, 18, 32, 0.94);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --surface-border: rgba(255, 255, 255, 0.08);
  --text: #f5f7ff;
  --text-secondary: #a4acc8;
  --accent: #7b3cff;
  --accent-2: #b24dff;
  --accent-3: #ffbf47;
  --success: #2ddf83;
  --danger: #ff5c7a;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --container: 1240px;
  --header-h: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 15%, rgba(135, 55, 255, 0.22), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(42, 113, 255, 0.15), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(179, 46, 255, 0.12), transparent 35%),
    linear-gradient(180deg, #05070f, #090d19 50%, #05070f);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }

.site-shell { position: relative; overflow: clip; }
.bg-glow {
  position: absolute;
  inset: auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
}
.bg-glow.one { top: -180px; left: -120px; background: #8537ff; }
.bg-glow.two { top: 260px; right: -180px; background: #2f66ff; }
.bg-glow.three { bottom: -200px; left: 22%; background: #b444ff; }

.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(6, 8, 15, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.casino-logo {
  width: 130px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}

.casino-logo img {
  width: 80px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.logo-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent-3), #ff9b2f);
  color: #1a1305;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(255, 190, 71, 0.25);
  filter: brightness(1) saturate(1);
  transition:
    box-shadow var(--motion-normal, 260ms) var(--ease-out, ease),
    filter var(--motion-normal, 260ms) var(--ease-out, ease);
}
.logo-badge svg { width: 32px; height: 32px; display: block; }
.logo span:last-child {
  font-size: 1.1rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text-secondary);
  transition: transform var(--motion-normal, 260ms) var(--ease-out, ease);
}
.nav a::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px rgba(178, 77, 255, .5);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--motion-normal, 260ms) var(--ease-out, ease);
}
.nav a::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -38%;
  width: 28%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-180%) skewX(-18deg);
}
.nav a.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.nav a.active::before,
.nav a:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav a:focus-visible,
.logo:focus-visible {
  outline: 2px solid rgba(255, 191, 71, .82);
  outline-offset: 2px;
}

@keyframes nav-light-sweep {
  0% { opacity: 0; transform: translateX(-180%) skewX(-18deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(720%) skewX(-18deg); }
}

@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-badge {
    filter: brightness(1.1) saturate(1.12);
    box-shadow:
      0 12px 34px rgba(255, 190, 71, 0.34),
      0 0 18px rgba(255, 190, 71, 0.2);
  }
  .nav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .065);
    transform: translateY(-2px);
  }
  .nav a:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .nav a:hover::after { animation: nav-light-sweep .64s var(--ease-out, ease) both; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== components.css ===== */
/* ==================================================
   Общие UI-компоненты
   Эти стили используются на главной, каталоге, обзорах и SEO-страницах.
   Не переносите их обратно в home.css: page bundles собираются раздельно.
   ================================================== */
.header-actions {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: var(--text);
}

.btn,
button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn::before,
button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  z-index: -1;
  width: 28%;
  background: rgba(255, 255, 255, .24);
  transform: skewX(-18deg) translateX(-180%);
  transition: transform .55s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before,
  button:hover::before {
    transform: skewX(-18deg) translateX(620%);
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 12px 30px rgba(123, 60, 255, 0.28);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.btn-sm {
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: .92rem;
}

.menu-toggle {
  display: none;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

.page-title h1 {
  margin: 18px 0 14px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.03;
}

.page-title p {
  max-width: 640px;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
}

.section {
  padding: 28px 0;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.section-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
}

.section-header p {
  margin: 10px 0 0;
  color: var(--text-secondary);
}

.link-more {
  display: inline-flex;
  align-items: center;
  color: #d8ccff;
  font-weight: 700;
  transition: color .45s ease, transform .6s cubic-bezier(.22,.61,.36,1), text-shadow .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .link-more:hover {
    color: #fff;
    transform: translateX(6px);
    text-shadow: 0 0 16px rgba(178,77,255,.5);
  }
}

.bonus-grid,
.review-grid,
.footer-grid {
  display: grid;
  gap: 18px;
}

.review-grid {
  grid-template-columns: 1.35fr .65fr;
  align-items: start;
}

.footer-grid {
  grid-template-columns: 1.1fr .8fr .8fr 1fr;
}

.card {
  background: linear-gradient(180deg, rgba(16, 20, 35, .96), rgba(12, 15, 26, .96));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card.soft {
  background: rgba(255, 255, 255, 0.03);
}

.card-pad {
  padding: 22px;
}

.page-hero {
  padding: 34px 0 16px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  color: #8f97b5;
  font-size: .95rem;
}

.footer {
  padding: 24px 0 40px;
  margin-top: 26px;
  color: var(--text-secondary);
}
.promo-code {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px dashed rgba(255,191,71,.45);
  border-radius: 13px;
  background: rgba(255,191,71,.07);
  color: #ffe2a4;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
@media (hover: hover) {
  .promo-code:hover { transform: translateY(-2px); border-color: #ffbf47; background: rgba(255,191,71,.11); }
}
.promo-code span { color: #b9af97; font-size: .72rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .06em; }
.promo-code strong { font-size: .9rem; line-height: 1.2; letter-spacing: .035em; }
.promo-code.copied { border-color: var(--success); background: rgba(45,223,131,.1); color: #9effc6; }
.promo-code-sm { min-height: 38px; padding: 6px 10px; flex-direction: column; align-items: flex-start; gap: 1px; }
.promo-code-sm span { font-size: .62rem; }
.promo-code-sm strong { font-size: .78rem; }
/* Единый вид карточек проектов во всех публичных списках. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  align-items: stretch;
}
.project-card {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition:
    transform .28s cubic-bezier(.2,.75,.3,1),
    border-color .28s ease,
    box-shadow .28s ease;
}
/* Фильтры каталога управляют видимостью через HTML-атрибут hidden. */
.project-card[hidden] {
  display: none !important;
}
.motion-ready .project-card.reveal {
  transition:
    opacity .55s ease var(--reveal-delay, 0ms),
    translate .55s cubic-bezier(.2,.75,.3,1) var(--reveal-delay, 0ms),
    transform .28s cubic-bezier(.2,.75,.3,1),
    border-color .28s ease,
    box-shadow .28s ease;
}
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(123,60,255,.1), transparent 42%);
  pointer-events: none;
}
.project-card > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(178,77,255,.26);
    box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 12px 30px rgba(123,60,255,.1);
  }
}
.project-card__head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.project-card__logo {
  width: 120px;
  height: 48px;
  display: grid;
  place-items: center start;
}
.project-card__logo img {
  width: 96px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}
.project-card__rating {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}
.project-card__rating > span:last-child {
  color: var(--text-secondary);
  font-size: .76rem;
}
.rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd469;
  font-size: .95rem;
  font-weight: 700;
}
.project-card__label {
  display: block;
  margin-bottom: 4px;
  color: #8f97b5;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-card__bonus {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}
.project-card__sub {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.45;
}
.project-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.project-card__facts > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.project-card__facts dt {
  color: #858da9;
  font-size: .7rem;
}
.project-card__facts dd {
  margin: 4px 0 0;
  color: #eef0ff;
  font-size: .86rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.project-card > .promo-code {
  width: 100%;
  align-items: flex-start;
}
.project-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.project-card__actions .btn {
  min-width: 0;
  flex: 1;
}
@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; }
  .project-card__actions .btn {
    height: 46px;
    min-height: 46px;
  }
}
@media (max-width: 360px) {
  .project-card__actions { flex-direction: column; }
}

.footer .card-pad { padding: 28px; }
.footer-title { color: white; font-weight: 700; margin-bottom: 14px; }
.footer-links { display: grid; justify-items: start; gap: 10px; }
.footer-links a {
  position: relative;
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary);
  transition: translate var(--motion-normal, 260ms) var(--ease-out, ease);
}
.footer-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 0 12px rgba(178, 77, 255, .55);
  transform: translateY(-50%) scaleX(.2);
  transform-origin: right center;
  transition:
    opacity var(--motion-fast, 180ms) ease,
    transform var(--motion-normal, 260ms) var(--ease-out, ease);
}
.footer-links a:focus-visible {
  outline: 2px solid rgba(255, 191, 71, .72);
  outline-offset: 4px;
  border-radius: 4px;
  color: var(--text);
}
.footer-links a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    color: #fff;
    translate: 4px 0;
  }
  .footer-links a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }
}
.foot-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

.mobile-dock {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  background: rgba(12,15,27,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.mobile-dock a {
  display: grid; gap: 6px; justify-items: center; font-size: 0.76rem; color: var(--text-secondary);
}
.mobile-dock a.active { color: white; }
.mobile-dock a:focus-visible {
  outline: 2px solid rgba(255, 191, 71, .82);
  outline-offset: 3px;
  border-radius: 12px;
}
.mobile-dock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mobile-icon {
  width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,0.04); display: grid; place-items: center;
}
.mobile-icon svg,
.menu-toggle svg,
.seo-card-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.reveal {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}
.motion-ready .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .55s ease, translate .55s cubic-bezier(.2,.75,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
.motion-ready .reveal.visible { opacity: 1; translate: 0 0; will-change: auto; }

.floating {
  animation: floatY 5s ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}
.floating.delay { animation-delay: 1s; }

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

/* ===== home.css ===== */
.hero {
  padding: 70px 0 40px;
}
.hero-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(123, 60, 255, 0.1);
  border: 1px solid rgba(123, 60, 255, 0.25);
  color: #d4c6ff;
  font-weight: 700;
  font-size: 0.88rem;
}
.hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.03;
}
.hero p {
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
  font-size: 1.02rem;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16 / 9;
  justify-self: end;

  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);

  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.motion-ready .hero-panel.reveal {
  transition:
    opacity .55s ease var(--reveal-delay, 0ms),
    translate .55s cubic-bezier(.2,.75,.3,1) var(--reveal-delay, 0ms),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.hero-panel > a,
.hero-panel picture { display: block; width: 100%; height: 100%; }

.hero-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(1) saturate(1);
  transition: filter 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero-panel:hover {
    border-color: rgba(154, 83, 255, 0.45);
    box-shadow:
      0 22px 55px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(123, 60, 255, 0.28);
  }
  .hero-panel:hover img { filter: brightness(1.045) saturate(1.08); }
  .hero-panel:hover::after { opacity: 1; }
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -10% -18% -10%;
  height: 120px;
  background: radial-gradient(circle, rgba(123,60,255,.28), transparent 65%);
  filter: blur(14px);
  opacity: .72;
  pointer-events: none;
  transition: opacity .25s ease;
}


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

.stat-card {
  padding: 24px 18px;
  text-align: center;
}
.stat-card .num {
  font-size: 2rem;
  font-weight: 800;
  color: #dfd5ff;
}
.stat-card .label {
  margin-top: 6px;
  color: var(--text-secondary);
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.logo-pill.gold { color: #e4c887; }
.logo-pill.red { color: #ff5d73; }
.logo-pill.orange { color: #ff8f49; }
.logo-pill.blue { color: #7fb5ff; }
.logo-pill.cyan { color: #6de1ff; }
.logo-pill.yellow { color: #ffda77; }

/* ===== seo.css ===== */
/* SEO-разделы: статьи, рейтинги, подборки и страницы доверия. */
.seo-hero { padding: 46px 0 24px; }
.seo-hero-inner { max-width: 860px; }
.seo-eyebrow {
  display: inline-flex;
  padding: 8px 12px;
  border: 1px solid rgba(123,60,255,.26);
  border-radius: 999px;
  background: rgba(123,60,255,.1);
  color: #d8cdff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seo-hero h1 { margin: 16px 0 14px; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.06; }
.seo-lead { margin: 0; max-width: 760px; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.75; }
.seo-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 20px; color: #8f97b5; font-size: .9rem; }
.seo-meta span { display: inline-flex; align-items: center; gap: 7px; }
.seo-meta a,
.seo-notice a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.seo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.seo-main { display: grid; gap: 20px; }
.seo-sidebar { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 16px; }
.seo-panel { padding: clamp(20px, 3vw, 32px); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: -4px 0 4px; }
.contact-btn-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: .78rem;
  line-height: 1;
  transition: transform .25s ease, background .25s ease;
}
.contact-btn-icon svg { width: 16px; height: 16px; }
.contact-actions .btn:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .contact-actions .btn:hover { transform: translateY(-3px); }
  .contact-actions .btn:hover .contact-btn-icon { transform: rotate(12deg) scale(1.12); }
}
.seo-panel h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.seo-panel h3 { margin: 22px 0 10px; }
.seo-panel p, .seo-panel li { color: var(--text-secondary); line-height: 1.75; }
.seo-panel p:first-of-type { margin-top: 0; }
.seo-panel p:last-child { margin-bottom: 0; }
.seo-panel ul, .seo-panel ol { margin: 12px 0 0; padding-left: 21px; }
.seo-panel li + li { margin-top: 8px; }
.seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seo-card {
  min-height: 190px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .26s cubic-bezier(.2,.75,.3,1), border-color .26s ease, box-shadow .26s ease;
}
.motion-ready .seo-card.reveal {
  transition:
    opacity .55s ease var(--reveal-delay, 0ms),
    translate .55s cubic-bezier(.2,.75,.3,1) var(--reveal-delay, 0ms),
    transform .26s cubic-bezier(.2,.75,.3,1),
    border-color .26s ease,
    box-shadow .26s ease;
}
.seo-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(123,60,255,.1), transparent 45%); pointer-events: none; }
.seo-card::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .seo-card:hover { transform: translateY(-7px) scale(1.012); border-color: rgba(178,77,255,.52); box-shadow: 0 28px 70px rgba(0,0,0,.46), 0 0 28px rgba(123,60,255,.2); }
  .seo-card:hover::after { animation: seo-card-sweep .72s ease both; }
  .seo-card:hover .seo-card-icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); box-shadow: 0 8px 24px rgba(123,60,255,.28); }
  .seo-card:hover .seo-card-link { transform: translateX(7px); color: #fff; text-shadow: 0 0 16px rgba(178,77,255,.5); }
  .seo-toc a:hover { color: var(--text); }
  .seo-link-cloud a:hover { border-color: rgba(123,60,255,.32); color: #fff; }
  .seo-meta a:hover,
  .seo-notice a:hover { color: #fff; text-decoration-color: currentColor; }
}
@keyframes seo-card-sweep {
  from { transform: translateX(-180%) skewX(-18deg); }
  to { transform: translateX(720%) skewX(-18deg); }
}
.seo-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(123,60,255,.13); color: #dacfff; font-size: 1.15rem; }
.seo-card h2, .seo-card h3 { margin: 2px 0 0; font-size: 1.08rem; }
.seo-card p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: .92rem; }
.seo-card-icon, .seo-card-link { transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, color .45s ease, text-shadow .45s ease; }
.seo-card-link { display: inline-flex; align-items: center; margin-top: auto; color: #d9ceff; font-size: .9rem; font-weight: 800; transition: transform .6s cubic-bezier(.22,.61,.36,1), color .45s ease, text-shadow .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .seo-card-link:hover { transform: translateX(6px); color: #fff; text-shadow: 0 0 16px rgba(178,77,255,.5); }
}
.seo-notice { padding: 17px 19px; border: 1px solid rgba(255,191,71,.2); border-radius: 16px; background: rgba(255,191,71,.055); color: #d8cfb9; line-height: 1.65; }
.seo-notice strong { color: #ffe1a0; }
.seo-toc { padding: 20px; }
.seo-toc h2, .seo-toc h3 { margin: 0 0 12px; font-size: 1rem; }
.seo-toc a { position: relative; display: block; padding: 8px 0 8px 14px; color: var(--text-secondary); font-size: .92rem; transition: color .45s ease, transform .6s cubic-bezier(.22,.61,.36,1), text-shadow .45s ease; }
.seo-toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 999px; background: var(--accent-3); box-shadow: 0 0 12px rgba(255,191,71,.55); transform: translateY(-50%); transition: height .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .seo-toc a:hover { color: #fff; transform: translateX(5px); text-shadow: 0 0 14px rgba(178,77,255,.45); }
  .seo-toc a:hover::before { height: 20px; }
}
.seo-trust { padding: 20px; }
.seo-trust strong { display: block; margin-bottom: 8px; }
.seo-trust p { margin: 0; color: var(--text-secondary); line-height: 1.6; font-size: .9rem; }
.seo-author { display: flex; gap: 13px; align-items: center; }
.seo-author-badge { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 900; }
.seo-author span { display: block; color: var(--text-secondary); font-size: .84rem; margin-top: 3px; }
.seo-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; }
.seo-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.seo-table th, .seo-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.065); }
.seo-table th { color: #929ab7; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.seo-table td { color: #e8eafd; }
.seo-table tr:last-child td { border-bottom: 0; }
.seo-link-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.seo-link-cloud a { padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: #c9cde0; font-size: .88rem; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.seo-related-projects { display: grid; gap: 18px; }
.seo-related-projects > h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.seo-checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; padding: 0; list-style: none; }
.seo-checks li { position: relative; padding-left: 28px; }
.seo-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 900; }
.seo-footer-note { max-width: 520px; line-height: 1.65; }

@media (max-width: 1280px) {
  .seo-layout { grid-template-columns: 1fr; }
  .seo-sidebar { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1040px) {
  .seo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .seo-hero { padding-top: 30px; }
  .seo-grid, .seo-sidebar { grid-template-columns: 1fr; }
  .seo-checks { grid-template-columns: 1fr; }
}

/* ===== responsive.css ===== */
/* Динамическое мобильное меню скрыто на desktop. */
.mobile-menu-backdrop,
.mobile-side-menu {
  display: none;
}

@media (max-width: 1120px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-wrap,
  .page-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  :root {
    --header-h: 0px;
  }

  .container {
    width: min(var(--container), calc(100% - 20px));
  }

  /* На телефоне верхняя шапка не нужна: навигация живёт в нижнем dock + drawer. */
  .header {
    display: none;
  }

  main {
    padding-top: 0;
  }

  .hero {
    padding: 20px 0 24px;
  }

  .page-hero {
    padding-top: 24px;
  }

  .hero-wrap {
    gap: 24px;
  }

  .hero-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  /* Статистика на мобильном всегда 2 x 2. */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    min-width: 0;
    padding: 16px 10px;
    border-radius: 18px;
  }

  .stat-card .num {
    font-size: 1.55rem;
    line-height: 1.05;
  }

  .stat-card .label {
    margin-top: 7px;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .mobile-dock {
    display: block;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 8px 10px;
    border-radius: 20px;
  }

  .mobile-dock a,
  .mobile-dock button {
    -webkit-tap-highlight-color: transparent;
  }

  .footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* Нижнее меню открывает полноценный боковой drawer. */
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(3, 5, 12, 0.68);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      visibility 0s linear 0.28s;
  }

  .mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-side-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    width: min(86vw, 340px);
    padding:
      max(18px, env(safe-area-inset-top))
      16px
      max(24px, env(safe-area-inset-bottom));
    flex-direction: column;
    background:
      radial-gradient(circle at 90% 5%, rgba(123, 60, 255, 0.20), transparent 34%),
      linear-gradient(180deg, rgba(14, 18, 34, 0.995), rgba(8, 11, 22, 0.995));
    border-left: 1px solid rgba(166, 104, 255, 0.22);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
    transform: translateX(104%);
    visibility: hidden;
    transition:
      transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1),
      visibility 0s linear 0.34s;
  }

  .mobile-side-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .mobile-side-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .mobile-side-menu__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .mobile-side-menu__brand .logo-badge {
    width: 34px;
    height: 34px;
  }

  .mobile-side-menu__close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-side-menu__nav {
    display: grid;
    gap: 8px;
    padding: 18px 0;
  }

  .mobile-side-menu__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    font-weight: 650;
    transition:
      color 0.22s ease,
      background 0.22s ease,
      border-color 0.22s ease,
      transform 0.22s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-side-menu__nav a::after {
    content: "›";
    color: #a889ff;
    font-size: 1.35rem;
    transition: transform 0.22s ease;
  }

  .mobile-side-menu__nav a:active {
    transform: scale(0.985);
  }

  .mobile-side-menu__nav a:focus-visible {
    outline: 2px solid rgba(255, 191, 71, .82);
    outline-offset: 2px;
  }

  .mobile-side-menu__nav a.active {
    color: #fff;
    border-color: rgba(138, 83, 255, 0.34);
    background: linear-gradient(135deg, rgba(123, 60, 255, 0.16), rgba(178, 77, 255, 0.08));
  }

  body.mobile-menu-open {
    overflow: hidden;
  }
}


@media (max-width: 560px) {
  .hero h1,
  .page-title h1 {
    font-size: 1.95rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card .num {
    font-size: 1.45rem;
  }

  .logo span:last-child {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


@media (max-width: 1120px) {
  .hero-wrap {
    gap: 28px;
  }

  .hero-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

}

/* ===== project-themes.css ===== */
/* Цвет проекта: единые токены для карточек и страниц обзоров. */
:where(.review-page, .project-card) {
  --project-primary-rgb: 151 103 255;
  --project-secondary-rgb: 178 77 255;
  --project-button-start: #6433cc;
  --project-button-end: #8a2fb5;
  --project-on-primary: #fff;
}

/* Неон карточки присутствует сразу; hover лишь слегка усиливает глубину. */
.card.project-card {
  isolation: isolate;
  border-color: rgb(var(--project-primary-rgb) / .22);
  background:
    radial-gradient(circle at 8% 0%, rgb(var(--project-primary-rgb) / .12), transparent 42%),
    radial-gradient(circle at 100% 100%, rgb(var(--project-secondary-rgb) / .07), transparent 44%),
    linear-gradient(180deg, rgba(16,20,35,.98), rgba(10,13,24,.98));
  box-shadow:
    0 0 0 1px rgb(var(--project-primary-rgb) / .035),
    0 18px 54px rgba(0,0,0,.36),
    0 0 22px rgb(var(--project-primary-rgb) / .075);
}
.project-card::before {
  background: linear-gradient(135deg, rgb(var(--project-primary-rgb) / .065), transparent 42%, rgb(var(--project-secondary-rgb) / .04));
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border: 1px solid rgb(var(--project-primary-rgb) / .06);
  border-radius: inherit;
  background: radial-gradient(circle at 92% 8%, rgb(var(--project-primary-rgb) / .1), transparent 28%);
  box-shadow: inset 0 0 32px rgb(var(--project-primary-rgb) / .035);
  pointer-events: none;
}
.project-card__bonus { color: rgb(var(--project-primary-rgb)); }
.project-card__facts > div {
  border-color: rgb(var(--project-primary-rgb) / .14);
  background: rgb(var(--project-primary-rgb) / .035);
}
.project-card .btn-secondary {
  border-color: rgb(var(--project-primary-rgb) / .26);
  background: rgb(var(--project-primary-rgb) / .065);
}
.btn.btn-project {
  color: var(--project-on-primary);
  border-color: rgb(var(--project-primary-rgb) / .52);
  background: linear-gradient(135deg, var(--project-button-start), var(--project-button-end));
  box-shadow:
    0 10px 28px rgb(var(--project-primary-rgb) / .25),
    inset 0 1px rgba(255,255,255,.18);
}
.project-card .promo-code,
.review-cta-card .promo-code {
  border-color: rgb(var(--project-primary-rgb) / .46);
  background: rgb(var(--project-primary-rgb) / .075);
  color: rgb(var(--project-primary-rgb));
  box-shadow: inset 0 0 22px rgb(var(--project-primary-rgb) / .045);
}
.project-card .promo-code span,
.review-cta-card .promo-code span { color: rgb(var(--project-primary-rgb)); }
.project-card .promo-code.copied,
.review-cta-card .promo-code.copied {
  border-color: var(--success);
  background: rgba(45,223,131,.1);
  color: #9effc6;
  box-shadow: inset 0 0 22px rgba(45,223,131,.06);
}
.project-card a:focus-visible,
.project-card button:focus-visible {
  outline: 3px solid rgb(var(--project-primary-rgb) / .86);
  outline-offset: 3px;
}

@media (hover: hover) {
  .project-card .btn-secondary:hover {
    border-color: rgb(var(--project-primary-rgb) / .42);
    background: rgb(var(--project-primary-rgb) / .11);
  }
  .btn.btn-project:hover {
    box-shadow:
      0 14px 34px rgb(var(--project-primary-rgb) / .34),
      inset 0 1px rgba(255,255,255,.22);
  }
  .project-card .promo-code:hover,
  .review-cta-card .promo-code:hover {
    border-color: rgb(var(--project-primary-rgb) / .7);
    background: rgb(var(--project-primary-rgb) / .12);
  }
  .project-card:hover {
    border-color: rgb(var(--project-primary-rgb) / .38);
    box-shadow:
      0 24px 64px rgba(0,0,0,.42),
      0 0 30px rgb(var(--project-primary-rgb) / .12);
  }
}

@media (hover: none) {
  .project-card:hover,
  .project-card .btn:hover,
  .project-card .promo-code:hover,
  .review-page .review-highlight-card:hover,
  .review-page .btn:hover,
  .review-page .promo-code:hover { transform: none; }
}

/* Цветовая атмосфера обзора без растровых или SVG-заглушек. */
body.review-page {
  background:
    radial-gradient(circle at 8% 10%, rgb(var(--project-primary-rgb) / .18), transparent 29%),
    radial-gradient(circle at 92% 24%, rgb(var(--project-secondary-rgb) / .14), transparent 28%),
    radial-gradient(circle at 50% 100%, rgb(var(--project-primary-rgb) / .07), transparent 35%),
    linear-gradient(180deg, #05070f, #090d19 50%, #05070f);
}
.review-page .bg-glow.one { background: rgb(var(--project-primary-rgb)); }
.review-page .bg-glow.two { background: rgb(var(--project-secondary-rgb)); }
.review-page :is(
  .review-hero-card,
  .review-score-card,
  .review-highlight-card,
  .review-cta-card,
  .review-article,
  .review-toc,
  .review-method-card
) {
  border-color: rgb(var(--project-primary-rgb) / .14);
  box-shadow:
    0 18px 54px rgba(0,0,0,.36),
    0 0 22px rgb(var(--project-primary-rgb) / .06);
}
.review-page .review-hero-card {
  isolation: isolate;
  grid-template-columns: 1fr;
  background:
    radial-gradient(circle at 83% 32%, rgb(var(--project-primary-rgb) / .29) 0 5%, transparent 6%),
    radial-gradient(ellipse at 84% 48%, rgb(var(--project-secondary-rgb) / .22), transparent 34%),
    linear-gradient(150deg, rgba(18,23,42,.99), rgba(10,13,25,.98));
}
.review-page .review-hero-card__copy { width: min(100%, 680px); }
.review-page .review-hero-card__logo {
  border-color: rgb(var(--project-primary-rgb) / .3);
  background: radial-gradient(circle at 50% 35%, rgb(var(--project-primary-rgb) / .13), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 0 24px rgb(var(--project-primary-rgb) / .11);
}
.review-page .review-hero-card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3%;
  width: min(36%, 310px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 0;
  border: 1px solid rgb(var(--project-primary-rgb) / .22);
  border-radius: 50%;
  background: repeating-conic-gradient(from 20deg, rgb(var(--project-primary-rgb) / .15) 0 8deg, transparent 8deg 26deg);
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44% 48%, transparent 49%);
  mask: radial-gradient(circle, transparent 0 43%, #000 44% 48%, transparent 49%);
  pointer-events: none;
}
.review-page .review-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(var(--project-primary-rgb) / .028) 22px 23px);
  -webkit-mask: linear-gradient(90deg, transparent 35%, #000);
  mask: linear-gradient(90deg, transparent 35%, #000);
  pointer-events: none;
}
.review-page .review-kicker,
.review-page .review-inline-link,
.review-page .link-more { color: rgb(var(--project-primary-rgb)); }
.review-page .review-hero-card h1 span {
  background: linear-gradient(110deg, #fff 0%, rgb(var(--project-primary-rgb)) 62%, rgb(var(--project-secondary-rgb)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.review-page .review-tag {
  border-color: rgb(var(--project-primary-rgb) / .28);
  background: rgb(var(--project-primary-rgb) / .085);
  color: rgb(var(--project-primary-rgb));
}
.review-page .review-hero-facts > div {
  border-color: rgb(var(--project-primary-rgb) / .15);
  background: rgb(var(--project-primary-rgb) / .04);
}
.review-page .review-score-card {
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--project-primary-rgb) / .1), transparent 38%),
    linear-gradient(180deg, rgba(18,23,42,.98), rgba(10,13,25,.98));
}
.review-page .review-score-card__badge {
  border-color: rgb(var(--project-primary-rgb) / .22);
  background: rgb(var(--project-primary-rgb) / .06);
  color: rgb(var(--project-primary-rgb));
}
.review-page :is(.review-card-icon, .review-score-row__icon) {
  color: rgb(var(--project-primary-rgb));
  border-color: rgb(var(--project-primary-rgb) / .28);
  background: rgb(var(--project-primary-rgb) / .1);
  box-shadow: 0 0 26px rgb(var(--project-primary-rgb) / .1);
}
.review-page .review-score-row__bar::-webkit-meter-optimum-value,
.review-page .review-score-row__bar::-webkit-meter-suboptimum-value,
.review-page .review-score-row__bar::-webkit-meter-even-less-good-value {
  background: linear-gradient(90deg, rgb(var(--project-secondary-rgb)), rgb(var(--project-primary-rgb)));
}
.review-page .review-score-row__bar::-moz-meter-bar {
  background: linear-gradient(90deg, rgb(var(--project-secondary-rgb)), rgb(var(--project-primary-rgb)));
}
.review-page .review-score-total {
  border-color: rgb(var(--project-primary-rgb) / .24);
  background: linear-gradient(135deg, rgb(var(--project-primary-rgb) / .11), rgba(255,255,255,.018));
}
.review-page .review-score-total > div strong {
  background: linear-gradient(135deg, rgb(var(--project-primary-rgb)), rgb(var(--project-secondary-rgb)));
  -webkit-background-clip: text;
  background-clip: text;
}
.review-page .review-highlight-card {
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--project-primary-rgb) / .09), transparent 38%),
    linear-gradient(180deg, rgba(16,20,35,.98), rgba(10,13,25,.98));
}
.review-page .review-highlight-value,
.review-page .review-highlight-value--gold,
.review-page .review-cta-card__bonus { color: rgb(var(--project-primary-rgb)); }
.review-page .review-feature-list li::before { color: rgb(var(--project-primary-rgb)); }
.review-page .review-cta-card {
  isolation: isolate;
  min-height: 0;
  background:
    radial-gradient(circle at 82% 78%, rgb(var(--project-primary-rgb) / .3) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 75%, transparent 0 21%, rgb(var(--project-secondary-rgb) / .18) 22% 23%, transparent 24%),
    linear-gradient(155deg, rgb(var(--project-secondary-rgb) / .2), rgba(11,14,28,.98) 72%);
}
.review-page .review-cta-card::before {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 150px;
  aspect-ratio: 1;
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(var(--project-primary-rgb) / .18) 0 12deg, transparent 12deg 32deg);
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 46% 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 0 45%, #000 46% 50%, transparent 51%);
  pointer-events: none;
}
.review-page .review-cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgb(var(--project-primary-rgb) / .09), transparent 48%, rgb(var(--project-secondary-rgb) / .09));
  pointer-events: none;
}
.review-page .review-cta-card__content { width: 100%; max-width: 270px; }
.review-page a:focus-visible,
.review-page button:focus-visible { outline-color: rgb(var(--project-primary-rgb) / .82); }

@media (hover: hover) {
  .review-page .review-highlight-card:hover {
    border-color: rgb(var(--project-primary-rgb) / .38);
    box-shadow:
      0 24px 60px rgba(0,0,0,.4),
      0 0 34px rgb(var(--project-primary-rgb) / .16);
  }
}

@media (max-width: 1080px) {
  .review-page .review-cta-card__content { max-width: 480px; }
}
@media (max-width: 760px) {
  .review-page .review-hero-card__copy,
  .review-page .review-cta-card__content { width: 100%; max-width: none; }
  .review-page .review-hero-card::before {
    top: auto;
    right: 12px;
    bottom: 12px;
    width: 140px;
    transform: none;
    opacity: .32;
  }
  .review-page .review-hero-card::after { opacity: .55; }
  .review-page .review-cta-card::before { width: 120px; opacity: .28; }
  .card.project-card {
    box-shadow:
      0 14px 36px rgba(0,0,0,.34),
      0 0 18px rgb(var(--project-primary-rgb) / .065);
  }
}
@media (max-width: 520px) {
  .review-page .review-hero-card::before { width: 105px; opacity: .22; }
  .review-page .review-cta-card::before { width: 92px; opacity: .2; }
}

/* ===== project-theme-tokens.css ===== */
/* Сформировано из js/projects-data.js. Не редактировать вручную. */
:where([data-project-theme="joycasino"]) {
  --project-primary-rgb: 255 200 87;
  --project-secondary-rgb: 206 126 29;
  --project-button-start: #ffd064;
  --project-button-end: #c77c1c;
  --project-on-primary: #1a1003;
}

:where([data-project-theme="norm"]) {
  --project-primary-rgb: 255 58 70;
  --project-secondary-rgb: 179 0 12;
  --project-button-start: #d30100;
  --project-button-end: #85040a;
  --project-on-primary: #ffffff;
}

:where([data-project-theme="apex"]) {
  --project-primary-rgb: 0 182 255;
  --project-secondary-rgb: 56 83 255;
  --project-button-start: #0079b8;
  --project-button-end: #1838b7;
  --project-on-primary: #ffffff;
}

:where([data-project-theme="tiger"]) {
  --project-primary-rgb: 255 157 36;
  --project-secondary-rgb: 255 208 90;
  --project-button-start: #ffb13b;
  --project-button-end: #e27818;
  --project-on-primary: #1a0e04;
}

:where([data-project-theme="fenix"]) {
  --project-primary-rgb: 239 138 37;
  --project-secondary-rgb: 218 32 48;
  --project-button-start: #b92a23;
  --project-button-end: #81121f;
  --project-on-primary: #ffffff;
}

:where([data-project-theme="eva"]) {
  --project-primary-rgb: 255 214 121;
  --project-secondary-rgb: 220 169 62;
  --project-button-start: #ffdf94;
  --project-button-end: #c28a2d;
  --project-on-primary: #171107;
}

:where([data-project-theme="velora"]) {
  --project-primary-rgb: 242 190 73;
  --project-secondary-rgb: 168 93 11;
  --project-button-start: #f6c653;
  --project-button-end: #b96f15;
  --project-on-primary: #171006;
}

:where([data-project-theme="faro"]) {
  --project-primary-rgb: 252 203 83;
  --project-secondary-rgb: 16 16 16;
  --project-button-start: #fccb53;
  --project-button-end: #eba932;
  --project-on-primary: #101010;
}

:where([data-project-theme="fortuna"]) {
  --project-primary-rgb: 247 179 61;
  --project-secondary-rgb: 169 101 16;
  --project-button-start: #ffc555;
  --project-button-end: #c77812;
  --project-on-primary: #171006;
}

:where([data-project-theme="booi"]) {
  --project-primary-rgb: 217 62 117;
  --project-secondary-rgb: 120 22 63;
  --project-button-start: #e75288;
  --project-button-end: #a3225d;
  --project-on-primary: #ffffff;
}

:where([data-project-theme="jozz"]) {
  --project-primary-rgb: 228 79 91;
  --project-secondary-rgb: 143 35 53;
  --project-button-start: #f16470;
  --project-button-end: #b62b42;
  --project-on-primary: #ffffff;
}

:where([data-project-theme="winity"]) {
  --project-primary-rgb: 62 230 224;
  --project-secondary-rgb: 249 221 14;
  --project-button-start: #46e8e2;
  --project-button-end: #159eaa;
  --project-on-primary: #061516;
}

/* ===== motion.css ===== */
/* Единые правила движения, hover и доступности. Подключается последним. */
:root {
  --motion-fast: 180ms;
  --motion-normal: 260ms;
  --motion-reveal: 550ms;
  --ease-out: cubic-bezier(.2,.75,.3,1);
}

/* Первый экран не ждёт JavaScript и IntersectionObserver: это сохраняет быстрый LCP. */
.motion-ready :is(.hero, .page-hero, .seo-hero, .review-intro) .reveal {
  opacity: 1;
  translate: 0 0;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    translate: none !important;
    will-change: auto !important;
  }
  .hero-panel,
  .hero-panel img,
  .logo,
  .logo-badge,
  .logo > span:last-child,
  .nav a,
  .footer-links a,
  .project-card,
  .seo-card,
  .review-highlight-card,
  .btn,
  .promo-code,
  .mobile-side-menu__nav a:active {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }
  .nav a::after { display: none !important; }
}