/* ═══ Кастомный слой поверх собранного Tailwind эталона (tw.css) ═══
   Палитра строго по судье: ink-950 #0A0A0C, ink-900 #0F0F12, ink-800 #16161B,
   текст #EEEEF1, акцент только #E11D2A. */

:root {
  --ink-950: #0a0a0c;
  --ink-900: #0f0f12;
  --ink-800: #16161b;
  --ink-700: #1f1f26;
  --ink-600: #2a2a33;
  --ink-400: #787884;
  --ink-300: #a3a3ac;
  --ink-100: #eeeef1;
  --accent: #e11d2a;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { background: var(--ink-950); color: var(--ink-100); font-family: Inter, system-ui, -apple-system, sans-serif; }
@supports (font-variation-settings: normal) {
  body { font-family: InterVariable, Inter, system-ui, sans-serif; }
}
::selection { background: var(--accent); color: #fff; }

/* Контейнер 1280px по судье */
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; width: 100%; }

/* ─── Логотип: строчное «ion», точка над i — красная ─── */
.logo {
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  display: inline-block; color: var(--ink-100);
}
.logo-i { position: relative; display: inline-block; }
.logo-i::after {
  content: ''; position: absolute;
  width: .24em; height: .24em; border-radius: 9999px;
  background: var(--accent);
  left: 50%; transform: translateX(-50%);
  top: -0.03em;
}

/* ─── Навигация ─── */
.nav-link { transition: color .2s; }
.nav-link:hover { color: var(--ink-100); }

/* ─── Кнопки ─── */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 600;
  border-radius: .75rem; padding: .625rem 1.25rem;
  border: 1px solid var(--accent);
  transition: filter .2s, transform .2s;
}
.btn-accent:hover { filter: brightness(1.1); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-100); font-weight: 600;
  border-radius: .75rem; padding: .625rem 1.25rem;
  border: 1px solid var(--ink-700);
  transition: border-color .2s, background .2s;
}
.btn-ghost:hover { border-color: var(--ink-600); background: var(--ink-800); }

/* ─── Eyebrow ─── */
.eyebrow {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--accent); font-weight: 600;
}
.eyebrow-dot {
  width: .375rem; height: .375rem; border-radius: 9999px;
  background: var(--accent); display: inline-block; flex: none;
}
.eyebrow-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-300);
  border: 1px solid var(--ink-700); border-radius: 9999px;
  padding: .375rem .5rem .375rem .875rem;
  background: rgba(10, 10, 12, .6);
}
.chip-badge {
  font-size: .625rem; letter-spacing: .08em;
  color: #fff; background: var(--accent);
  border-radius: 9999px; padding: .2rem .6rem; font-weight: 700;
}

/* ─── HERO: сетка-фон ─── */
.hero-grid {
  position: absolute; inset: -25% -10%;
  background-image:
    linear-gradient(to right, rgba(238, 238, 241, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238, 238, 241, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 35%, transparent 75%);
  pointer-events: none;
  will-change: transform;
}

/* ─── Карточки продуктов: приподнятая поверхность, красная кромка, живой hover ─── */
.card {
  display: block; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #1a1a21 0%, #121216 55%, var(--ink-900) 100%);
  border: 1px solid var(--ink-700); border-radius: .75rem;
  padding: 1.5rem;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* красная световая кромка сверху — видна и в покое */
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(225, 29, 42, .65) 30%, rgba(225, 29, 42, .65) 70%, transparent 100%);
  opacity: .45; transition: opacity .25s ease;
}
/* диагональный блик при наведении */
.card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(238, 238, 241, .05) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(225, 29, 42, .55);
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px -16px rgba(225, 29, 42, .35),
    0 8px 28px -8px rgba(0, 0, 0, .6);
}
.card:hover::before { opacity: 1; }
.card:hover::after { transform: translateX(120%); }

.card-star {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(225, 29, 42, .12);
  border: 1px solid rgba(225, 29, 42, .25);
  border-radius: .625rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.card-star svg { width: 1.25rem; height: 1.25rem; }
.card:hover .card-star {
  background: var(--accent); color: #fff;
  transform: rotate(90deg);
}
.card-link {
  display: inline-block; margin-top: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; color: var(--ink-400);
  transition: color .25s ease, transform .25s ease;
}
.card:hover .card-link { color: var(--accent); transform: translateX(3px); }

/* ─── Витрина продуктов: карточки 2×2 с переливом и вращающимися звёздами ─── */
.product-card {
  overflow: hidden;
  padding: 2rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(225, 29, 42, .07), transparent 55%),
    linear-gradient(160deg, #17171c 0%, var(--ink-900) 60%);
  border-color: var(--ink-700);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.product-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(238, 238, 241, .05) 46%,
    rgba(225, 29, 42, .12) 50%,
    rgba(238, 238, 241, .05) 54%,
    transparent 65%);
  transform: translateX(-130%);
  animation: card-sheen 7s ease-in-out infinite;
}
.product-card:nth-child(2)::before { animation-delay: 1.2s; }
.product-card:nth-child(3)::before { animation-delay: 2.4s; }
.product-card:nth-child(4)::before { animation-delay: 3.6s; }
.product-card:nth-child(5)::before { animation-delay: 4.8s; }
@keyframes card-sheen {
  0%, 18%  { transform: translateX(-130%); }
  48%, 100% { transform: translateX(130%); }
}
.product-card .card-star { width: 2rem; height: 2rem; }
.product-card .card-star svg {
  animation: star-spin 14s linear infinite;
  transition: filter .25s;
}
@keyframes star-spin { to { transform: rotate(360deg); } }
.product-card h3 { font-size: 1.125rem; margin-top: 1.25rem; }
.product-card p { font-size: .9375rem; }
.product-card:hover {
  border-color: rgba(225, 29, 42, .6);
  transform: translateY(-4px);
  box-shadow:
    0 14px 44px rgba(225, 29, 42, .14),
    0 8px 28px rgba(0, 0, 0, .55);
}
.product-card:hover .card-star svg {
  animation-duration: 2.2s;
  filter: drop-shadow(0 0 7px rgba(225, 29, 42, .85));
}
.product-card:hover .card-link { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .product-card::before, .product-card .card-star svg { animation: none; }
}

/* Платформенные чипы */
.platform-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-100);
  border: 1px solid var(--ink-700); border-radius: 9999px;
  padding: .375rem .875rem; background: var(--ink-800); flex: none;
}
.platform-chip-muted { color: var(--ink-400); background: transparent; }

/* Крупный яркий заголовок платформы (чуть меньше h2 «Решения по платформам») */
.platform-title {
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: 1.5rem; color: var(--ink-100); flex: none;
}
@media (min-width: 768px) { .platform-title { font-size: 1.875rem; } }
.platform-title .dot { color: var(--accent); margin-left: .02em; }
.platform-gap { margin-top: 5.5rem; }
@media (min-width: 768px) { .platform-gap { margin-top: 7rem; } }
.platform-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; color: var(--ink-400); flex: none;
}

/* Карточки «скоро» */
.card-soon {
  position: relative;
  border: 1px dashed var(--ink-700); border-radius: .75rem;
  padding: 1.5rem;
  transition: border-color .2s;
}
.card-soon:hover { border-color: var(--ink-600); }
.soon-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .625rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-400);
  border: 1px solid var(--ink-700); border-radius: 9999px;
  padding: .2rem .6rem;
}

/* ─── Чек-лист «О нас» ─── */
.check-item { display: flex; gap: .75rem; align-items: flex-start; }
.check-item p { font-size: .9375rem; color: var(--ink-300); line-height: 1.625; }
.check-item b { color: var(--ink-100); font-weight: 600; }
.check-icon {
  color: var(--accent); font-weight: 700; flex: none;
  width: 1.375rem; height: 1.375rem; font-size: .8125rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-700); border-radius: 9999px;
  background: rgba(225, 29, 42, .1);
  margin-top: .125rem;
}

/* ─── TRUST-карточки ─── */
.trust-card {
  background: var(--ink-950);
  border: 1px solid var(--ink-800); border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color .2s;
}
.trust-card:hover { border-color: var(--ink-600); }
.icon-box {
  width: 2.5rem; height: 2.5rem; border-radius: .625rem;
  background: rgba(225, 29, 42, .1); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-box svg { width: 1.25rem; height: 1.25rem; }

/* ─── CTA ─── */
.cta-panel {
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(225, 29, 42, .14), transparent 70%),
    var(--ink-900);
}

/* ─── Анимации: скрываем только при включённом JS и без reduce-motion ─── */
html.js .reveal, html.js .hero-el { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .hero-el { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* Шапка при скролле */
#site-header { transition: box-shadow .3s; }
#site-header.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

/* ─── Утилиты, отсутствующие в собранном tw.css эталона ─── */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.z-50 { z-index: 50; }
.h-px { height: 1px; }
.mt-2 { margin-top: .5rem; }
.mt-14 { margin-top: 3.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-2 { row-gap: .5rem; }
.gap-y-5 { row-gap: 1.25rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.hover\:text-ink-100:hover { color: var(--ink-100); }
@media (min-width: 768px) { .md\:block { display: block; } }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.footer-mail-icon { width: 1.125rem; height: 1.125rem; }
.tg-icon { width: 1.05rem; height: 1.05rem; }