/* Волна: фирменный стиль Tapwave по обложке сообщества. Светлый фон, тёмно-синий
   в текстах, голубой в кнопках (до 2026-10-26 зелень и лайм), тёмный круг со знаком W, бледная W фоном.
   Manrope из design-packs.css. Все правила только внутри .pack-wave; для классов
   из social-links.css, blocks-extra.css и contact-card.css селекторы начинаются
   с .public-page.pack-wave, потому что тема подключена раньше них. */
.public-page.pack-wave {
  --wave-lime: #3ccbff;
  --wave-lime-hover: #6fd9ff;
  --wave-ink: #0b2545;
  --wave-coal: #222321;
  /* Плашки матовым стеклом (с 2026-10-26): море подложки просвечивает размытым. */
  --wave-card: rgb(255 255 255 / 0.5);
  --wave-glass: blur(14px) saturate(1.3);
  --wave-line: #d6e0ea;
  --wave-pale: #dde6ef;
  --page-bg: #f2f6fa;
  --page-text: #0b2545;
  --page-accent: var(--wave-lime);
  --page-soft: var(--wave-card);
  --page-muted: #4a5a6e;
  --page-line: var(--wave-line);
  --page-input: #ffffff;
  --pack-radius: 22px;
  color-scheme: light;
}

/* Бледная W на фоне, как на обложке: слева, во всю высоту экрана. */
.public-page.pack-wave .pack-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M-2 14L22 60L32 32L42 60L66 14' fill='none' stroke='%23dde6ef' stroke-width='5' stroke-linejoin='miter' stroke-miterlimit='12'/%3E%3C/svg%3E")
    no-repeat left 42% / min(78vw, 560px) auto;
}
/* На своём фоне владельца бледная W не нужна. */
.public-page.pack-wave.bg-own .pack-backdrop::after {
  display: none;
}

/* Шапка: вордмарк слева, тёмный круг справа, ниже обложка и текст. */
.pack-wave .pack-hero {
  display: grid;
  gap: clamp(18px, 3cqi, 28px);
}
.pack-wave .pack-wave-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pack-wave .pack-wave-brand {
  display: block;
  width: clamp(120px, 24cqi, 190px);
  height: auto;
  opacity: 0.9;
}
.pack-wave .pack-wave-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(56px, 11cqi, 88px);
  height: clamp(56px, 11cqi, 88px);
  border-radius: 50%;
  background: var(--wave-coal);
  overflow: hidden;
}
.pack-wave .pack-wave-badge .pack-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.pack-wave .pack-photo {
  border-radius: var(--pack-radius);
  aspect-ratio: 16 / 10;
  max-height: 420px;
}
.pack-wave .pack-hero .location {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.pack-wave .pack-hero .location svg {
  display: none;
}
.pack-wave .pack-hero :is(h1, :where(.preview-name)) {
  font-weight: 300;
  font-size: clamp(38px, 8.5cqi, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.pack-wave .pack-hero .tagline {
  font-size: clamp(18px, 2.8cqi, 26px);
  line-height: 1.35;
  color: var(--page-text);
  margin-bottom: 14px;
}
.pack-wave .pack-hero .profile-about {
  font-size: 15px;
  line-height: 1.65;
  color: var(--page-muted);
}

/* Кнопки: белые таблетки с зелёной рамкой; главные - лаймовые с тёмным текстом. */
.public-page.pack-wave .link-block {
  border-radius: 999px;
  border: 1px solid var(--wave-line);
  background: var(--wave-card);
  color: var(--page-text);
  padding: 18px 24px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.public-page.pack-wave .link-block[href]:hover {
  background: var(--wave-lime-hover);
  border-color: var(--wave-lime-hover);
  transform: none;
}
.public-page.pack-wave .link-block strong {
  font-weight: 600;
}
.public-page.pack-wave .link-block small {
  color: var(--page-muted);
}
.public-page.pack-wave .hero-cta .link-block,
.public-page.pack-wave .sticky-cta .link-block,
.public-page.pack-wave .section-accent .link-block,
.public-page.pack-wave .contact-action .contact-save,
.public-page.pack-wave .variant-feature .link-block {
  background: var(--wave-lime);
  border-color: var(--wave-lime);
  color: var(--wave-ink);
}
.public-page.pack-wave .hero-cta .link-block strong,
.public-page.pack-wave .sticky-cta .link-block strong,
.public-page.pack-wave .section-accent .link-block strong,
.public-page.pack-wave .contact-action .contact-save strong,
.public-page.pack-wave .variant-feature .link-block strong {
  color: var(--wave-ink);
}
.public-page.pack-wave .hero-cta .link-block[href]:hover,
.public-page.pack-wave .sticky-cta .link-block[href]:hover,
.public-page.pack-wave .section-accent .link-block[href]:hover,
.public-page.pack-wave .contact-action .contact-save[href]:hover,
.public-page.pack-wave .variant-feature .link-block[href]:hover {
  background: var(--wave-coal);
  border-color: var(--wave-coal);
  color: var(--wave-lime);
}
.public-page.pack-wave .hero-cta .link-block[href]:hover strong,
.public-page.pack-wave .sticky-cta .link-block[href]:hover strong,
.public-page.pack-wave .section-accent .link-block[href]:hover strong,
.public-page.pack-wave .contact-action .contact-save[href]:hover strong,
.public-page.pack-wave .variant-feature .link-block[href]:hover strong {
  color: var(--wave-lime);
}
.public-page.pack-wave .hero-cta {
  margin-top: 22px;
}
.public-page.pack-wave .sticky-cta {
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
}

/* Рамка фокуса тёмная: лаймовая на лаймовой кнопке читалась как двойной контур. */
.public-page.pack-wave :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--wave-ink);
}

/* Секции: заголовки тонкие, как имя; карточки белые со скруглением. */
.pack-wave .public-blocks :is(h2, :where(.preview-heading)) {
  font-weight: 400;
  letter-spacing: -0.035em;
}
.pack-wave .page-section.variant-card,
.pack-wave .section-lead,
.pack-wave .section-faq.variant-card,
.pack-wave .section-text.variant-card {
  background: var(--wave-card);
  border: 1px solid var(--wave-line);
  border-radius: var(--pack-radius);
  padding: clamp(20px, 3.5cqi, 30px);
}
.pack-wave .variant-feature.section-text {
  padding: clamp(22px, 4cqi, 36px);
  border-radius: var(--pack-radius);
  background: var(--wave-coal);
  color: #f2f6fa;
}
.pack-wave .variant-feature.section-text :is(h2, :where(.preview-heading)) {
  color: var(--wave-lime);
}
.pack-wave .variant-feature.section-text p {
  color: #f2f6fa;
}
.pack-wave .variant-grid .services-list > div,
.public-page.pack-wave .pricing-card,
.public-page.pack-wave .stats-grid > div,
.public-page.pack-wave .faq-block details,
.public-page.pack-wave .countdown-grid > div,
.public-page.pack-wave .video-poster {
  background: var(--wave-card);
  border: 1px solid var(--wave-line);
  border-radius: var(--pack-radius);
}
.public-page.pack-wave .pricing-card.pricing-highlight {
  border-color: var(--wave-coal);
  background: var(--wave-coal);
  color: #f2f6fa;
}
.public-page.pack-wave .pricing-card.pricing-highlight .pricing-price b {
  color: var(--wave-lime);
}
.public-page.pack-wave .pricing-card .link-block {
  justify-content: center;
}
.public-page.pack-wave .stats-grid b {
  font-weight: 400;
  letter-spacing: -0.04em;
}
.pack-wave blockquote {
  background: var(--wave-card);
  border: 1px solid var(--wave-line);
}
.pack-wave blockquote p {
  font-weight: 300;
  letter-spacing: -0.02em;
}
.pack-wave blockquote svg {
  color: var(--wave-lime);
  opacity: 1;
}
.pack-wave .services-list b {
  color: var(--page-text);
  font-weight: 500;
}
.pack-wave .divider-block span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}
.public-page.pack-wave .case-steps dt {
  color: var(--page-muted);
}

/* Соцсети: тёмные круги с лаймовым значком, как знак на обложке. */
.public-page.pack-wave .social-icon-link {
  background: var(--wave-coal);
  color: var(--wave-lime);
  border-radius: 50%;
}
.public-page.pack-wave .social-icon-link:hover {
  background: var(--wave-lime);
  color: var(--wave-ink);
}

/* Форма: белая карточка, светлые поля, лаймовая кнопка с тёмным текстом. */
.pack-wave .lead-form :is(input, textarea, select) {
  background: #fff;
  border: 1px solid var(--wave-line);
  color: var(--page-text);
  border-radius: 14px;
}
.pack-wave .lead-form :is(input, textarea, select):focus {
  border-color: var(--wave-ink);
}
/* Вес выше правила акцента из blocks-extra.css, иначе текст кнопки станет кремовым. */
.public-page.pack-wave.design-pack .lead-form button,
.public-page.pack-wave.design-pack .section-accent .lead-form button,
.public-page.pack-wave.design-pack .public-button {
  background: var(--wave-lime);
  color: var(--wave-ink);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}
.public-page.pack-wave.design-pack .lead-form button:hover,
.public-page.pack-wave.design-pack .section-accent .lead-form button:hover,
.public-page.pack-wave.design-pack .public-button:hover {
  background: var(--wave-coal);
  color: var(--wave-lime);
}
.pack-wave .page-brand a {
  color: var(--page-muted);
}
.pack-wave .page-brand b {
  color: var(--page-text);
}
.pack-wave .qr-code-paper {
  fill: #fff;
}

/* Видеоподложка: море из символов (три слоя волн), с 2026-10-26 вместо знака W.
   Пока идёт видео, статичная W не нужна; при «уменьшении движения» видео прячется
   и остаётся статичная подложка. */
.public-page.pack-wave .pack-backdrop-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}
.public-page.pack-wave .pack-backdrop-video::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .public-page.pack-wave .pack-backdrop-media {
    display: none;
  }
  .public-page.pack-wave .pack-backdrop-video::after {
    display: block;
  }
}

/* Матовое стекло: все плашки на --wave-card размывают то, что под ними. */
.public-page.pack-wave .link-block,
.pack-wave .page-section.variant-card,
.pack-wave .section-lead,
.pack-wave .section-faq.variant-card,
.pack-wave .section-text.variant-card,
.pack-wave .variant-grid .services-list > div,
.public-page.pack-wave .pricing-card,
.public-page.pack-wave .stats-grid > div,
.public-page.pack-wave .faq-block details,
.public-page.pack-wave .countdown-grid > div,
.pack-wave blockquote {
  -webkit-backdrop-filter: var(--wave-glass);
  backdrop-filter: var(--wave-glass);
}
/* Без backdrop-filter полупрозрачная плашка ложится прямо на символы: делаем её плотной. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .public-page.pack-wave {
    --wave-card: #ffffff;
  }
}

/* Свой фон, на котором текст дизайна не читается (класс ink-auto и --auto-ink ставит
   design-style.ts):
   текст и линии прямо на фоне страницы берут цвет под фон. Карточки дизайна
   возвращают свои цвета; правило без веса, поэтому цвета самого дизайна и цветной секции главнее. */
.public-page.pack-wave.ink-auto {
  --page-bg: var(--pack-background-color);
  --page-text: var(--auto-ink);
  --page-muted: var(--auto-muted);
  --page-line: color-mix(in srgb, var(--auto-ink) 24%, transparent);
  --page-soft: var(--wave-card);
  --wave-card: color-mix(in srgb, var(--auto-ink) 7%, transparent);
  --page-input: color-mix(in srgb, var(--auto-ink) 8%, var(--page-bg));
  color: var(--auto-ink);
}
:where(.public-page.pack-wave.ink-auto)
  :where(.lead-form :is(input, textarea, select)):where(
    :not(.section-colored, .section-colored *)
  ) {
  --page-bg: #f2f6fa;
  --page-text: #0b2545;
  --page-muted: #4a5a6e;
  --page-line: var(--wave-line);
  --page-soft: var(--wave-card);
  --wave-card: rgb(255 255 255 / 0.5);
  --page-input: #ffffff;
  color: var(--page-text);
  color-scheme: light;
}
/* Вордмарк нарисован тёмным: на своём фоне он цвета текста. */
.public-page.pack-wave.ink-auto .pack-wave-brand {
  object-position: -9999px 0;
  background: var(--auto-ink);
  -webkit-mask: url("/assets/tapwave-wordmark-ink-regular.svg") center / contain no-repeat;
  mask: url("/assets/tapwave-wordmark-ink-regular.svg") center / contain no-repeat;
}
/* Подписи постеров карты и видео серые из общих стилей: на своём фоне приглушённый цвет текста. */
.public-page.pack-wave.ink-auto :is(.map-poster, .video-poster) small {
  color: var(--page-muted);
}