:root {
  --lg-surface: rgba(14, 18, 27, 0.42);
  --lg-surface-strong: rgba(12, 16, 24, 0.58);
  --lg-stroke: rgba(255, 255, 255, 0.16);
  --lg-stroke-soft: rgba(255, 255, 255, 0.10);
  --lg-highlight: rgba(255, 255, 255, 0.22);
  --lg-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  --lg-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);
  --lg-text: rgba(246, 240, 233, 0.96);
  --lg-text-soft: rgba(232, 224, 214, 0.78);
  --lg-gold: #ebbe6f;
  --lg-radius: 28px;
  --lg-radius-sm: 22px;
}

html.liquid-on body {
  background:
    radial-gradient(circle at 14% 14%, rgba(235, 190, 111, 0.08), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.05), transparent 22%),
    radial-gradient(circle at 78% 86%, rgba(121, 144, 255, 0.05), transparent 24%),
    #07090d;
}

/* Убираем старый широкий слой по секциям */
html.liquid-on .section::before,
html.liquid-on section::before {
  content: none !important;
  display: none !important;
}

/* Базовые glass-поверхности */
html.liquid-on .glass-topbar,
html.liquid-on .glass-panel,
html.liquid-on .glass-card,
html.liquid-on .glass-modal,
html.liquid-on .portfolio-category,
html.liquid-on .service-card,
html.liquid-on .review-card,
html.liquid-on .contact-card,
html.liquid-on .price-card,
html.liquid-on .hero-stat,
html.liquid-on .gallery-card,
html.liquid-on .portfolio-modal__dialog,
html.liquid-on .testimonial-card,
html.liquid-on .about-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--lg-text);
  border: 1px solid var(--lg-stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    var(--lg-surface);
  box-shadow: var(--lg-shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

html.liquid-on .glass-topbar::before,
html.liquid-on .glass-panel::before,
html.liquid-on .glass-card::before,
html.liquid-on .glass-modal::before,
html.liquid-on .portfolio-category::before,
html.liquid-on .service-card::before,
html.liquid-on .review-card::before,
html.liquid-on .contact-card::before,
html.liquid-on .price-card::before,
html.liquid-on .hero-stat::before,
html.liquid-on .gallery-card::before,
html.liquid-on .portfolio-modal__dialog::before,
html.liquid-on .testimonial-card::before,
html.liquid-on .about-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  z-index: 0;
}

html.liquid-on .glass-topbar > *,
html.liquid-on .glass-panel > *,
html.liquid-on .glass-card > *,
html.liquid-on .glass-modal > *,
html.liquid-on .portfolio-category > *,
html.liquid-on .service-card > *,
html.liquid-on .review-card > *,
html.liquid-on .contact-card > *,
html.liquid-on .price-card > *,
html.liquid-on .hero-stat > *,
html.liquid-on .gallery-card > *,
html.liquid-on .portfolio-modal__dialog > *,
html.liquid-on .testimonial-card > *,
html.liquid-on .about-card > * {
  position: relative;
  z-index: 1;
}

html.liquid-on .glass-topbar {
  border-radius: 999px;
}

/* Отдельно усиливаем карточку цены, чтобы текст не проваливался */
html.liquid-on .price-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)),
    var(--lg-surface-strong);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Текст внутри glass-блоков */
html.liquid-on .glass-card h1,
html.liquid-on .glass-card h2,
html.liquid-on .glass-card h3,
html.liquid-on .glass-card h4,
html.liquid-on .glass-card h5,
html.liquid-on .glass-card h6,
html.liquid-on .glass-panel h1,
html.liquid-on .glass-panel h2,
html.liquid-on .glass-panel h3,
html.liquid-on .glass-panel h4,
html.liquid-on .glass-panel h5,
html.liquid-on .glass-panel h6,
html.liquid-on .price-card h1,
html.liquid-on .price-card h2,
html.liquid-on .price-card h3,
html.liquid-on .price-card h4,
html.liquid-on .price-card h5,
html.liquid-on .price-card h6,
html.liquid-on .service-card h1,
html.liquid-on .service-card h2,
html.liquid-on .service-card h3,
html.liquid-on .review-card h1,
html.liquid-on .review-card h2,
html.liquid-on .review-card h3,
html.liquid-on .contact-card h1,
html.liquid-on .contact-card h2,
html.liquid-on .contact-card h3,
html.liquid-on .hero-stat strong,
html.liquid-on .testimonial-card h1,
html.liquid-on .testimonial-card h2,
html.liquid-on .testimonial-card h3,
html.liquid-on .about-card h1,
html.liquid-on .about-card h2,
html.liquid-on .about-card h3 {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

html.liquid-on .glass-card p,
html.liquid-on .glass-card li,
html.liquid-on .glass-card small,
html.liquid-on .glass-panel p,
html.liquid-on .glass-panel li,
html.liquid-on .glass-panel small,
html.liquid-on .price-card p,
html.liquid-on .price-card li,
html.liquid-on .price-card small,
html.liquid-on .service-card p,
html.liquid-on .service-card li,
html.liquid-on .service-card small,
html.liquid-on .review-card p,
html.liquid-on .review-card li,
html.liquid-on .review-card small,
html.liquid-on .contact-card p,
html.liquid-on .contact-card li,
html.liquid-on .contact-card small,
html.liquid-on .testimonial-card p,
html.liquid-on .testimonial-card li,
html.liquid-on .testimonial-card small,
html.liquid-on .about-card p,
html.liquid-on .about-card li,
html.liquid-on .about-card small {
  color: var(--lg-text-soft);
}

/* Навигация и подписи */
html.liquid-on .nav-links a,
html.liquid-on .topbar a,
html.liquid-on .header a,
html.liquid-on .site-header a {
  color: rgba(255, 255, 255, 0.88);
}

html.liquid-on .hero-label,
html.liquid-on .eyebrow,
html.liquid-on .section-kicker {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-gold);
}

/* Кнопки и pill-элементы */
html.liquid-on .glass-pill,
html.liquid-on .hero-cta a,
html.liquid-on .btn,
html.liquid-on button,
html.liquid-on .contact-actions a,
html.liquid-on .portfolio-modal__close,
html.liquid-on .portfolio-modal__nav {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--lg-shadow-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.liquid-on .glass-pill:not(.btn--primary):not(.is-primary),
html.liquid-on .hero-cta a:not(.btn--primary):not(.is-primary),
html.liquid-on .btn:not(.btn--primary):not(.is-primary),
html.liquid-on button:not(.btn--primary):not(.is-primary),
html.liquid-on .contact-actions a:not(.btn--primary):not(.is-primary),
html.liquid-on .portfolio-modal__close,
html.liquid-on .portfolio-modal__nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(18, 21, 28, 0.38);
}

html.liquid-on .glass-pill:hover,
html.liquid-on .hero-cta a:hover,
html.liquid-on .btn:hover,
html.liquid-on button:hover,
html.liquid-on .contact-actions a:hover,
html.liquid-on .portfolio-modal__close:hover,
html.liquid-on .portfolio-modal__nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

/* Исправление телефонной иконки */
html.liquid-on .icon-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
}

html.liquid-on .icon-phone::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20a1 1 0 0 1-1 1C10.06 21 3 13.94 3 5a1 1 0 0 1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.12.35.03.75-.24 1.02l-2.21 2.2Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20a1 1 0 0 1-1 1C10.06 21 3 13.94 3 5a1 1 0 0 1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.12.35.03.75-.24 1.02l-2.21 2.2Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Мобильная версия */
@media (max-width: 900px) {
  html.liquid-on .glass-topbar,
  html.liquid-on .glass-panel,
  html.liquid-on .glass-card,
  html.liquid-on .glass-modal,
  html.liquid-on .portfolio-category,
  html.liquid-on .service-card,
  html.liquid-on .review-card,
  html.liquid-on .contact-card,
  html.liquid-on .price-card,
  html.liquid-on .hero-stat,
  html.liquid-on .gallery-card,
  html.liquid-on .portfolio-modal__dialog,
  html.liquid-on .testimonial-card,
  html.liquid-on .about-card {
    border-radius: var(--lg-radius-sm);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
}