/*
Theme Name: Uniq Visitcard Glass
Theme URI: https://makeseo.pro/
Author: Tom
Author URI: https://makeseo.pro/
Description: Premium glass-style business card theme specially designed for MakeSEO.pro. Features modern glassmorphism design, dual-language support (RU/EN), automatic browser language detection, dark/light theme toggle, interactive animations, case studies slider, pricing plans, FAQ sections, and mobile-responsive layout. Perfect for SEO specialists, digital agencies, and service-based businesses.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uniq-visitcard-glass
Tags: business, portfolio, seo, agency, glass, glassmorphism, responsive, translation-ready, custom-colors, custom-logo, featured-images, full-width-template, sticky-post, threaded-comments, two-columns, one-column, right-sidebar, flexible-header, custom-header, custom-background, custom-menu, editor-style, theme-options, blog, e-commerce, corporate, professional, modern, clean, minimal, elegant, premium
*/

/* ===== Mobile Animation Override ===== */
@media (max-width: 419px) {
  
  /* Полное отключение всех анимаций на мобильных */
  .uv-growth-chart,
  .uv-growth-chart *,
  .uv-growth-chart svg,
  .uv-growth-chart svg *,
  .uv-growth-line,
  .uv-growth-dots,
  .uv-task-box,
  .uv-task-box *,
  .uv-task-check,
  .uv-task-check *,
  .uv-metric-value,
  .uv-metric-value *,
  .uv-metric-checkbox,
  .uv-metric-checkbox *,
  .uv-dashboard-chart,
  .uv-dashboard-chart *,
  .uv-dashboard-chart svg,
  .uv-dashboard-chart svg *,
  .uv-dashboard-chart .uv-chart-line,
  .uv-dashboard-container,
  .uv-dashboard-container *,
  .uv-dashboard-header,
  .uv-dashboard-header *,
  .uv-dashboard-metrics,
  .uv-dashboard-metrics *,
  .uv-metric,
  .uv-metric *,
  .uv-chart-svg,
  .uv-chart-svg *,
  .uv-chart-grid,
  .uv-chart-grid *,
  .uv-chart-axis,
  .uv-chart-axis *,
  .uv-chart-labels,
  .uv-chart-labels *,
  .uv-tasks-visual,
  .uv-tasks-visual *,
  .growth-bg,
  .growth-bg * {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-fill-mode: none !important;
    animation-iteration-count: 0 !important;
    transition: none !important;
    transform: none !important;
  }
  
  /* Дополнительно отключаем stroke-dasharray анимации */
  .uv-growth-line,
  .uv-dashboard-chart .uv-chart-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  
  /* Отключаем opacity анимации */
  .uv-growth-dots {
    opacity: 1 !important;
  }
  
  /* Полностью скрываем проблемные элементы на мобильных */
  .uv-dashboard-container,
  .uv-growth-chart {
    display: none !important;
  }
  
  /* Добавляем картинку Chart.png для блока "Работа на результат" */
  .uv-card:first-child .uv-card-chart,
  .wp-block-group.uv-card:first-child .uv-card-chart {
    display: flex !important;
    background-image: url('./assets/images/Chart.png') !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
  }
  
  /* Добавляем картинку роста трафика для блока "Стабильный рост" */
  .uv-card-laptop {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M40 140 L80 120 L120 100 L160 60 L200 40" stroke="%233b82f6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="40" cy="140" r="3" fill="%233b82f6"/><circle cx="80" cy="120" r="3" fill="%233b82f6"/><circle cx="120" cy="100" r="3" fill="%233b82f6"/><circle cx="160" cy="60" r="3" fill="%233b82f6"/><circle cx="200" cy="40" r="3" fill="%233b82f6"/><text x="100" y="180" text-anchor="middle" fill="%233b82f6" font-size="16" font-weight="bold">📈</text></svg>') !important;
    background-size: 80px 80px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
  }
}


/* ================== Variables ================== */
:root{
  --uv-bg: #ffffff;
  --uv-text: #0b0f14;
  --uv-muted: #5f6b7a;
  --uv-border: #eaeaea;
  --uv-primary: #7C3AED;
  --uv-secondary: #0E1B2C;
  --uv-cta-text: #ffffff;
  --uv-radius: 14px;
  --uv-spacing: 16px;

  /* header gap */
  --uv-header-gap: 40px;
  --uv-header-height: 64px;
  --uv-header-margin: 16px;
}

/* Dark theme variables */
:root.uv-dark {
  --uv-bg: #0B0F14;
  --uv-text: #F3F5F7;
  --uv-muted: #B5C0CD;
  --uv-border: #1f2630;
  --uv-primary: #A78BFA;
  --uv-secondary: #C7D2FE;
  --uv-cta-text: #0B0F14;

}

/* ================== Base ================== */
html,body{margin:0;padding:0;overflow-x:hidden;}
html { 
  scroll-behavior: smooth; 
}
body { 
  background: var(--uv-bg); 
  color: var(--uv-text); 
  font-family: Inter, "Segoe UI", Roboto, sans-serif; 
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ================== Universal Container & Grid ================== */

/* Сетка карточек (универсальная) */
.uv-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}


/* Две колонки - removed duplicate, using polish layer version */

/* Заголовки - removed duplicate, using polish layer version */

/* Карточки */
.uv-card{
  border: 1px solid var(--uv-border);
  border-radius: var(--uv-radius);
  padding: 24px;
  background: var(--uv-bg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uv-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.uv-card h4{
  margin: 0 0 12px;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
}

.uv-card p{
  margin: 0;
  line-height: 1.6;
  color: var(--uv-muted);
}

/* Кнопки с адаптивными размерами */
.uv-glass-btn{
  font-size: clamp(14px, 1.6vw, 16px) !important;
  padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 32px) !important;
}

/* Адаптивность кнопок */
@media (max-width: 768px) {
  .uv-glass-btn {
    font-size: clamp(13px, 2vw, 15px) !important;
    padding: clamp(8px, 2.5vw, 10px) clamp(16px, 5vw, 24px) !important;
  }
}

@media (max-width: 480px) {
  .uv-glass-btn {
    font-size: clamp(12px, 3vw, 14px) !important;
    padding: clamp(6px, 3vw, 8px) clamp(12px, 6vw, 20px) !important;
  }
}

a { color: var(--uv-primary); text-decoration:none; }
.wp-site-blocks { max-width: 1200px; margin-inline: auto; padding: 0 20px; box-sizing: border-box; }
hr, .uv-card { border-color: var(--uv-border); }

/* Allow alignfull elements to break out to viewport edges */
.wp-site-blocks > .alignfull{
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

/* Force header positioning to override any WordPress styles */
/* Header positioning - centered with proper width */
#siteHeader {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 2 * var(--uv-header-gap, 40px));
  max-width: calc(100vw - 2 * var(--uv-header-gap, 40px));
  z-index: 1000;
  background: var(--uv-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--uv-border);
  padding: 0 20px;
  box-sizing: border-box;
}

/* Higher specificity for inline styles override */
body #siteHeader[style*="width"],
body #siteHeader[style*="left"],
body #siteHeader[style*="right"] {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 2 * var(--uv-header-gap, 40px)) !important;
  max-width: calc(100vw - 2 * var(--uv-header-gap, 40px)) !important;
}

/* Удален дублирующийся медиа-запрос - стили перенесены ниже */

/* ================== АДАПТАЦИЯ ПОД ВСЕ ПОПУЛЯРНЫЕ РАЗРЕШЕНИЯ ================== */

/* 1280x800 - компактные ноутбуки */
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 800px) and (max-height: 800px) {
  body #siteHeader {
    padding: 0 8px !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    max-width: calc(100vw - 60px) !important;
    width: calc(100vw - 60px) !important;
  }
  
  .uv-brand { gap: 4px !important; }
  .uv-logo { width: 22px !important; height: 22px !important; margin-top: -2px !important; }
  .uv-brand-text { 
    font-size: 14px !important; 
    line-height: 18px !important;
    margin-inline-start: -6px !important;
    margin-left: -3px !important;
  }
  #siteHeader .wp-block-navigation { gap: 6px !important; }
  #siteHeader .wp-block-navigation a { font-size: 11px !important; padding: 3px 5px !important; }
  .uv-header-controls { gap: 5px !important; }
  .uv-messenger-icon { width: 18px !important; height: 18px !important; }
  #siteHeader .site-phone { font-size: 10px !important; }
  .uv-header-controls .wp-block-button__link { 
    font-size: 11px !important; 
    padding: 0 10px !important;
    min-height: 32px !important;
  }
  #uv-theme-toggle { width: 22px !important; height: 22px !important; }
  #uv-theme-toggle img { width: 22px !important; height: 14px !important; }
  
}

/* 1280x1024 - квадратные мониторы */
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 1024px) and (max-height: 1024px) {
  body #siteHeader {
    padding: 0 6px !important;
    min-height: 46px !important;
    margin-top: 8px !important;
    max-width: calc(100vw - 50px) !important;
    width: calc(100vw - 50px) !important;
  }
  
  .uv-brand { gap: 3px !important; }
  .uv-logo { width: 20px !important; height: 20px !important; margin-top: -2px !important; }
  .uv-brand-text { 
    font-size: 13px !important; 
    line-height: 17px !important;
    margin-inline-start: -5px !important;
    margin-left: -2px !important;
  }
  #siteHeader .wp-block-navigation { gap: 5px !important; }
  #siteHeader .wp-block-navigation a { font-size: 10px !important; padding: 3px 4px !important; }
  .uv-header-controls { gap: 4px !important; }
  .uv-messenger-icon { width: 16px !important; height: 16px !important; }
  #siteHeader .site-phone { font-size: 9px !important; }
  .uv-header-controls .wp-block-button__link { 
    font-size: 10px !important; 
    padding: 0 8px !important;
    min-height: 30px !important;
  }
  #uv-theme-toggle { width: 20px !important; height: 20px !important; }
  #uv-theme-toggle img { width: 20px !important; height: 13px !important; }
  
}

/* 1366x768 - БАЗОВОЕ разрешение, эталон */
@media (min-width: 1366px) and (max-width: 1366px) and (min-height: 768px) and (max-height: 768px) {
  body #siteHeader {
    padding: 0 12px !important;
    min-height: 54px !important;
    margin-top: 12px !important;
    max-width: calc(100vw - 80px) !important;
    width: calc(100vw - 80px) !important;
  }
  
  .uv-brand { gap: 6px !important; }
  .uv-logo { width: 26px !important; height: 26px !important; margin-top: -4px !important; }
  .uv-brand-text { 
    font-size: 16px !important; 
    line-height: 20px !important;
    margin-inline-start: -8px !important;
    margin-left: -4px !important;
  }
  #siteHeader .wp-block-navigation { gap: 10px !important; }
  #siteHeader .wp-block-navigation a { font-size: 12px !important; padding: 4px 7px !important; }
  .uv-header-controls { gap: 8px !important; }
  .uv-messenger-icon { width: 20px !important; height: 20px !important; }
  #siteHeader .site-phone { font-size: 11px !important; }
  .uv-header-controls .wp-block-button__link { 
    font-size: 12px !important; 
    padding: 0 14px !important;
    min-height: 36px !important;
  }
  #uv-theme-toggle { width: 26px !important; height: 26px !important; }
  #uv-theme-toggle img { width: 26px !important; height: 16px !important; }
  
}

/* 1440x900 - MacBook Air, популярные ноутбуки */
@media (min-width: 1440px) and (max-width: 1440px) and (min-height: 900px) and (max-height: 900px) {
  body #siteHeader {
    padding: 0 18px !important;
    min-height: 60px !important;
    margin-top: 16px !important;
    max-width: calc(100vw - 120px) !important;
    width: calc(100vw - 120px) !important;
  }
  
  .uv-brand { gap: 8px !important; }
  .uv-logo { width: 30px !important; height: 30px !important; }
  .uv-brand-text { font-size: 19px !important; }
  #siteHeader .wp-block-navigation { gap: 16px !important; }
  #siteHeader .wp-block-navigation a { font-size: 14px !important; padding: 6px 12px !important; }
  .uv-header-controls { gap: 14px !important; }
  .uv-messenger-icon { width: 24px !important; height: 24px !important; }
  #siteHeader .site-phone { font-size: 14px !important; }
  .uv-header-controls .wp-block-button__link { font-size: 14px !important; padding: 0 18px !important; }
  #uv-theme-toggle { width: 30px !important; height: 30px !important; }
  
}

/* 1536x864 - современные ноутбуки */
@media (min-width: 1536px) and (max-width: 1536px) and (min-height: 864px) and (max-height: 864px) {
  body #siteHeader {
    padding: 0 20px !important;
    min-height: 62px !important;
    margin-top: 16px !important;
    max-width: calc(100vw - 120px) !important;
    width: calc(100vw - 120px) !important;
  }
  
  .uv-brand { gap: 8px !important; }
  .uv-logo { width: 30px !important; height: 30px !important; }
  .uv-brand-text { font-size: 19px !important; }
  #siteHeader .wp-block-navigation { gap: 16px !important; }
  #siteHeader .wp-block-navigation a { font-size: 14px !important; padding: 6px 12px !important; }
  .uv-header-controls { gap: 14px !important; }
  .uv-messenger-icon { width: 24px !important; height: 24px !important; }
  #siteHeader .site-phone { font-size: 14px !important; }
  .uv-header-controls .wp-block-button__link { font-size: 14px !important; padding: 0 18px !important; }
  #uv-theme-toggle { width: 30px !important; height: 30px !important; }
  
}

/* 1600x900 - широкие мониторы */
@media (min-width: 1600px) and (max-width: 1600px) and (min-height: 900px) and (max-height: 900px) {
  body #siteHeader {
    padding: 0 20px !important;
    min-height: 64px !important;
    margin-top: 18px !important;
    max-width: calc(100vw - 140px) !important;
    width: calc(100vw - 140px) !important;
  }
  
  .uv-brand { gap: 8px !important; }
  .uv-logo { width: 32px !important; height: 32px !important; }
  .uv-brand-text { font-size: 20px !important; }
  #siteHeader .wp-block-navigation { gap: 18px !important; }
  #siteHeader .wp-block-navigation a { font-size: 15px !important; padding: 7px 12px !important; }
  .uv-header-controls { gap: 16px !important; }
  .uv-messenger-icon { width: 26px !important; height: 26px !important; }
  #siteHeader .site-phone { font-size: 14px !important; }
  .uv-header-controls .wp-block-button__link { font-size: 15px !important; padding: 0 20px !important; }
  #uv-theme-toggle { width: 32px !important; height: 32px !important; }
  
}

/* Стили для средних десктопов 1440-1919px - с !important */
@media (min-width: 1440px) and (max-width: 1919px) {
  body #siteHeader {
    padding: 0 12px !important;
    min-height: 60px !important;
    margin-top: 12px !important;
    max-width: calc(100vw - 2cm) !important;
    width: calc(100vw - 2cm) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  /* Стили для бренда на диапазоне 1440-1919px */
  .uv-brand {
    gap: 6px !important;
  }
  
  .uv-logo {
    width: 28px !important;
    height: 28px !important;
    margin-top: -7px !important;
  }
  
  .uv-brand-text {
    font-size: 18px !important;
    line-height: 22px !important;
    margin-inline-start: -10px !important;
    margin-left: -5px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
  
  #siteHeader .wp-block-navigation {
    gap: 12px !important;
  }
  
  #siteHeader .wp-block-navigation a {
    font-size: 13px !important;
    padding: 5px 8px !important;
  }
  
  .uv-header-controls {
    gap: 10px !important;
  }
  
  .uv-messenger-icon {
    width: 20px !important;
    height: 20px !important;
  }
  
  #siteHeader .site-phone {
    font-size: 12px !important;
  }
  
  .uv-header-controls .uv-glass-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  
  #uv-theme-toggle {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 1920x1080 - Full HD мониторы */
@media (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
  body #siteHeader {
    padding: 0 24px !important;
    min-height: 70px !important;
    margin-top: 20px !important;
    max-width: calc(100vw - 160px) !important;
    width: calc(100vw - 160px) !important;
  }
  
  .uv-brand { gap: 10px !important; }
  .uv-logo { width: 34px !important; height: 34px !important; }
  .uv-brand-text { font-size: 22px !important; }
  #siteHeader .wp-block-navigation { gap: 20px !important; }
  #siteHeader .wp-block-navigation a { font-size: 16px !important; padding: 8px 14px !important; }
  .uv-header-controls { gap: 18px !important; }
  .uv-messenger-icon { width: 28px !important; height: 28px !important; }
  #siteHeader .site-phone { font-size: 15px !important; }
  .uv-header-controls .wp-block-button__link { font-size: 16px !important; padding: 0 22px !important; }
  #uv-theme-toggle { width: 34px !important; height: 34px !important; }
}

/* 2560x1440 - 2K мониторы */
@media (min-width: 2560px) and (max-width: 2560px) and (min-height: 1440px) and (max-height: 1440px) {
  body #siteHeader {
    padding: 0 32px !important;
    min-height: 80px !important;
    margin-top: 24px !important;
    max-width: calc(100vw - 200px) !important;
    width: calc(100vw - 200px) !important;
  }
  
  .uv-brand { gap: 12px !important; }
  .uv-logo { width: 38px !important; height: 38px !important; }
  .uv-brand-text { font-size: 24px !important; }
  #siteHeader .wp-block-navigation { gap: 24px !important; }
  #siteHeader .wp-block-navigation a { font-size: 18px !important; padding: 10px 16px !important; }
  .uv-header-controls { gap: 20px !important; }
  .uv-messenger-icon { width: 32px !important; height: 32px !important; }
  #siteHeader .site-phone { font-size: 16px !important; }
  .uv-header-controls .wp-block-button__link { font-size: 18px !important; padding: 0 24px !important; }
  #uv-theme-toggle { width: 38px !important; height: 38px !important; }
}

/* Стили для больших десктопов 1920px+ (общие, если точное разрешение не задано) */
@media (min-width: 1920px) {
  #siteHeader {
    padding: 0 20px !important;
    min-height: 70px !important;
    margin-top: 20px !important;
  }
  
  /* Стили для бренда на диапазоне 1920px+ */
  .uv-brand {
    gap: 8px !important;
  }
  
  .uv-logo {
    width: 32px !important;
    height: 32px !important;
    margin-top: -9px !important;
  }
  
  .uv-brand-text {
    font-size: 20px !important;
    line-height: 24px !important;
    margin-inline-start: -12px !important;
    margin-left: -7px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
  
  #siteHeader .wp-block-navigation {
    gap: 16px !important;
  }
  
  #siteHeader .wp-block-navigation a {
    font-size: 14px !important;
    padding: 6px 10px !important;
  }
  
  .uv-header-controls {
    gap: 12px !important;
  }
  
  .uv-messenger-icon {
    width: 24px !important;
    height: 24px !important;
  }
  
  #siteHeader .site-phone {
    font-size: 14px !important;
  }
  
  .uv-header-controls .uv-glass-btn {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  
  #uv-theme-toggle {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ================== Liquid glass base ================== */
.uv-glass{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: var(--uv-radius);
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25);
}

:root.uv-dark .uv-glass{
  background: rgba(18,22,28,0.56);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px rgba(255,255,255,0.04);
}

/* All buttons unified style - like header CTA */
.uv-glass-btn,
.uv-glass-btn--accent,
.wp-block-button__link.uv-glass-btn,
.wp-block-button__link.uv-glass-btn--accent {
  display: inline-flex !important;
  padding: 12px 32px !important;
  min-height: 48px !important;
  min-width: calc(180px + 5%) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: var(--uv-text) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  height: auto !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* iPhone-like fill animation for all buttons */
.uv-glass-btn::before,
.uv-glass-btn--accent::before,
.wp-block-button__link.uv-glass-btn::before,
.wp-block-button__link.uv-glass-btn--accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--uv-primary), #A78BFA);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
  z-index: -1;
}

.uv-glass-btn:hover::before,
.uv-glass-btn--accent:hover::before,
.wp-block-button__link.uv-glass-btn:hover::before,
.wp-block-button__link.uv-glass-btn--accent:hover::before {
  width: 100%;
}

.uv-glass-btn:hover,
.uv-glass-btn--accent:hover,
.wp-block-button__link.uv-glass-btn:hover,
.wp-block-button__link.uv-glass-btn--accent:hover {
  transform: translateY(-1px);
  color: white !important;
  border-color: var(--uv-primary) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

/* Dark theme styles for all buttons */
:root.uv-dark .uv-glass-btn,
:root.uv-dark .uv-glass-btn--accent,
:root.uv-dark .wp-block-button__link.uv-glass-btn,
:root.uv-dark .wp-block-button__link.uv-glass-btn--accent {
  background: rgba(18,22,28,0.56) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px rgba(255,255,255,0.04) !important;
}

:root.uv-dark .uv-glass-btn::before,
:root.uv-dark .uv-glass-btn--accent::before,
:root.uv-dark .wp-block-button__link.uv-glass-btn::before,
:root.uv-dark .wp-block-button__link.uv-glass-btn--accent::before {
  background: linear-gradient(135deg, #A78BFA, #C7D2FE);
}

:root.uv-dark .uv-glass-btn:hover,
:root.uv-dark .uv-glass-btn--accent:hover,
:root.uv-dark .wp-block-button__link.uv-glass-btn:hover,
:root.uv-dark .wp-block-button__link.uv-glass-btn--accent:hover {
  color: var(--uv-bg) !important;
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4) !important;
}

/* Fallback for no backdrop-filter */
@supports not (backdrop-filter: blur(1px)){
  .uv-glass, .uv-glass-btn{ background: rgba(255,255,255,0.95); }
  :root.uv-dark .uv-glass, :root.uv-dark .uv-glass-btn{ background: rgba(10,12,16,0.95); }
}


/* inner layout helpers */
#siteHeader > .wp-block-group { 
  width:100%; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:18px; 
  box-sizing:border-box; 
  height: 100%;
}

/* let left side take remaining space; right controls size to content */
.uv-left { 
  flex: 1 1 auto; 
  min-width: 0; 
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 20px;
}

/* Brand/Logo styles */
.uv-brand {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.8vw, 8px);
  height: clamp(20px, 2.5vw, 32px);
  min-height: clamp(20px, 2.5vw, 32px);
  max-height: clamp(20px, 2.5vw, 32px);
}


.uv-logo {
  margin-top: clamp(-4px, -0.8vw, -9px);
  width: clamp(20px, 2.5vw, 30px);
  height: clamp(20px, 2.5vw, 30px);
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.uv-brand-text {
  margin-inline-start: clamp(-6px, -1.2vw, -12px);  
  font-family: Inter, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 30px);
  line-height: clamp(18px, 2.5vw, 32px);
  color: var(--uv-text);
  white-space: nowrap;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--uv-primary), #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin-left: clamp(-3px, -0.8vw, -7px); 
  height: clamp(18px, 2.5vw, 32px);
  min-height: clamp(18px, 2.5vw, 32px);
  max-height: clamp(18px, 2.5vw, 32px);
}

/* Dark theme gradient for brand text */
:root.uv-dark .uv-brand-text {
  background: linear-gradient(135deg, #A78BFA, #C7D2FE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover effect for brand text */
.uv-brand:hover .uv-brand-text {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--uv-primary), #8B5CF6, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.uv-header-controls { 
  flex: 0 0 auto; 
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  height: 100%;
  max-width: 50%;
  padding-right: 20px;
}

/* left side: logo + nav */
#siteHeader .wp-block-site-logo img,
#siteHeader .site-logo { width:36px; height:36px; display:inline-block; border-radius:8px; object-fit:cover; }

/* navigation */
#siteHeader .wp-block-navigation,
.uv-center .wp-block-navigation { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  height: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}
#siteHeader .wp-block-navigation a{
  color: var(--uv-text);
  padding:6px 10px;
  border-radius:8px;
  font-size:14px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
}
#siteHeader .wp-block-navigation a:hover{
  background: rgba(124,58,237,0.07);
  color: var(--uv-text);
  transform: translateY(-2px);
}

/* reset nav list margins/padding */
#siteHeader .wp-block-navigation ul { 
  margin: 0; 
  padding: 0; 
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  flex-wrap: nowrap;
  list-style: none;
}

/* right controls */
.uv-messengers { 
  display:flex; 
  gap:8px; 
  align-items:center; 
  height: 100%;
  flex-shrink: 0;
}
.uv-icon { 
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex; 
  align-items: center;
  justify-content: center;
  transition: transform .15s ease; 
  flex-shrink: 0;
}
.uv-icon:hover { 
  transform: translateY(-2px); 
}
.site-phone { 
  font-weight:600; 
  color:#7c3aed; 
  margin:0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  padding: 0 8px;
  transition: transform .15s ease; 
  flex-shrink: 0;
}
.site-phone:hover {
  transform: translateY(-2px); 
}

/* language switcher */
.uv-lang{ display:inline-flex; gap:10px; align-items:center; font-size:14px; line-height:1; color: var(--uv-muted); }
.uv-lang a{ color: var(--uv-muted); padding:6px 8px; border-radius:6px; text-decoration:none; }
.uv-lang a.active, .uv-lang a:hover{ color: var(--uv-text); background: rgba(124,58,237,0.06); }

/* remove default margins from CTA wrapper inside header */
.uv-header-controls .wp-block-button{ 
  margin:0 !important; 
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.uv-header-controls .wp-block-button__link{ 
  border-radius:999px; 
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  min-height: 40px;
  font-weight: 500;
  flex-shrink: 0;
}


/* CTA outline */
.uv-cta-outline,
.wp-block-button__link.uv-cta-outline,
#siteHeader .wp-block-button__link.uv-cta-outline { 
  display:inline-flex !important; 
  padding: 0 16px !important; 
  border:1px solid var(--uv-border) !important; 
  border-radius:999px !important; 
  text-decoration:none !important; 
  color:var(--uv-text) !important; 
  background: transparent !important; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  white-space: nowrap !important;
  font-size: clamp(13px,1.4vw,15px) !important;
  line-height: 1.2 !important;
  min-height: 40px !important;
  width: auto !important;
  min-width: unset !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
  font-weight: 500 !important;
}

/* iPhone-like fill animation */
.uv-cta-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--uv-primary), #A78BFA);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
  z-index: -1;
}

.uv-cta-outline:hover::before {
  width: 100%;
}

.uv-cta-outline:hover { 
  transform: translateY(-1px); 
  color: white;
  border-color: var(--uv-primary);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Dark theme styles for CTA */
:root.uv-dark .uv-cta-outline::before {
  background: linear-gradient(135deg, #A78BFA, #C7D2FE);
}

:root.uv-dark .uv-cta-outline:hover {
  color: var(--uv-bg);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

/* header placeholder (not used for non-fixed) */
.header-placeholder.active { height: 0; }

/* theme toggle button */
#uv-theme-toggle{
  border: none;
  background: transparent;
  padding: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  min-height: 40px;
  border-radius: 8px;
  transition: background .15s ease;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
}
#uv-theme-toggle:hover {
  background: rgba(124,58,237,0.06);
}
#uv-theme-toggle[aria-pressed="true"]{ 
  background: rgba(0,0,0,0.06); 
}
#uv-theme-toggle img {
  display: block !important;
  width: 40px;
  height: 24px;
  object-fit: contain;
  visibility: visible !important;
  opacity: 1 !important;
}


  /* ================== Grid and other styles ================== */

/* Grid & cards - removed duplicate, using polish layer version */
.uv-card { border:1px solid var(--uv-border); border-radius: var(--uv-radius); padding: 20px; background: var(--uv-bg); }
.uv-badge { display:inline-block; padding:.2em .6em; font-size:.8rem; border:1px solid var(--uv-border); border-radius:999px; }

/* Steps */
.uv-steps { 
  counter-reset: step; 
  margin: 24px 0;
}

.uv-step { 
  display: flex; 
  gap: 16px; 
  align-items: flex-start; 
  margin-bottom: 16px;
  padding: 12px 0;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.5;
}

.uv-step::before { 
  counter-increment: step; 
  content: counter(step); 
  flex: 0 0 36px; 
  height: 36px; 
  line-height: 36px; 
  text-align: center; 
  border-radius: 999px; 
  background: var(--uv-primary); 
  color: var(--uv-cta-text); 
  font-weight: 700;
  font-size: 14px;
}

/* About section steps (без счетчика) */
.uv-about-text .uv-steps {
  counter-reset: none;
}

.uv-about-text .uv-step::before {
  display: none;
}

/* New Steps Container with Laptop */
.uv-steps-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: center;
}

/* Full width container override */
.wp-block-group.uv-steps-container.is-layout-constrained {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Left Column - Steps List */
.uv-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uv-step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

.uv-step-item:hover {
  border-color: var(--uv-primary);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.uv-step-item.active {
  border-color: var(--uv-primary);
  background: rgba(124, 58, 237, 0.15);
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  box-shadow: 0 8px 35px rgba(124, 58, 237, 0.2), inset 0 1px rgba(167, 139, 250, 0.3);
}

/* Темная тема - liquid glass эффект */
:root.uv-dark .uv-step-item {
  background: rgba(18,22,28,0.56);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px rgba(255,255,255,0.04);
}

:root.uv-dark .uv-step-item.active {
  border-color: var(--uv-primary);
  background: rgba(124, 58, 237, 0.25);
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  box-shadow: 0 8px 35px rgba(124, 58, 237, 0.3), inset 0 1px rgba(167, 139, 250, 0.4);
}

:root.uv-dark .uv-step-item:hover {
  border-color: var(--uv-primary);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.uv-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #E5E7EB;
  color: #6B7280;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.uv-step-item.active .uv-step-number {
  background: var(--uv-primary);
  color: white;
}

.uv-step-content {
  flex: 1;
}

.uv-step-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  transition: color 0.3s ease;
}

.uv-step-item.active .uv-step-title {
  color: var(--uv-primary);
}

/* Темная тема для текста этапов */
:root.uv-dark .uv-step-title {
  color: rgba(255, 255, 255, 0.9);
}

:root.uv-dark .uv-step-item.active .uv-step-title {
  color: var(--uv-primary);
}


/* Center Column - Laptop Image */
.uv-laptop-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.uv-laptop-image {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.uv-laptop-image:hover {
  transform: scale(1.05);
}

/* Right Column - Step Details */
.uv-step-details {
  padding: 20px;
}

.uv-step-main-title {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

/* Темная тема для заголовка */
:root.uv-dark .uv-step-main-title {
  color: white;
}

.uv-step-detail {
  display: none;
}

.uv-step-detail.active {
  display: block;
}

.uv-step-current-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--uv-primary);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

.uv-step-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #6B7280;
}

.uv-duration-icon {
  font-size: 16px;
}

.uv-step-description {
  font-size: 16px;
  color: #374151;
  margin: 0 0 16px 0;
  font-weight: 500;
}

.uv-step-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.uv-step-tasks li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
}

/* Темная тема для деталей этапов */
:root.uv-dark .uv-step-duration {
  color: rgba(255, 255, 255, 0.7);
}

:root.uv-dark .uv-step-description {
  color: rgba(255, 255, 255, 0.9);
}

:root.uv-dark .uv-step-tasks li {
  color: rgba(255, 255, 255, 0.8);
}

.uv-step-tasks li::before {
  content: '•';
  position: absolute; 
  left: 0;
  color: var(--uv-primary);
  font-weight: bold;
  font-size: 18px;
}

/* Responsive Design */

/* ================== POLISH LAYER - 15.6" OPTIMIZATION ================== */

/* Контейнер выравнивает контент на 1366–1920 */
.uv-container{ 
  width: min(1200px, 92vw); 
  margin: 0 auto; 
  padding: 0 12px; 
}

/* Адаптивность контейнеров */
@media (max-width: 1200px) {
  .uv-container {
    width: min(1000px, 95vw);
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .uv-container {
  width: 100%; 
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .uv-container {
    padding: 0 12px;
  }
}

/* Секции: единые отступы и заголовки */
.uv-section{ 
  padding: clamp(32px, 5vw, 72px) 0; 
}


/* Адаптивность секций */
@media (max-width: 768px) {
  .uv-section {
    padding: clamp(24px, 6vw, 48px) 0;
  }
}

@media (max-width: 480px) {
  .uv-section {
    padding: clamp(20px, 8vw, 32px) 0;
  }
}

.uv-section h2{ 
  margin: 0 0 20px; 
  font-size: clamp(24px, 3vw, 36px); 
  text-align: center; 
}

/* Адаптивность заголовков */
@media (max-width: 768px) {
  .uv-section h2 {
    font-size: clamp(20px, 4vw, 28px);
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .uv-section h2 {
    font-size: clamp(18px, 5vw, 24px);
    margin-bottom: 12px;
  }
}

.uv-section .lead{ 
  font-size: clamp(16px, 2vw, 18px); 
  opacity: .9; 
}

/* Адаптивность текста */
@media (max-width: 768px) {
  .uv-section .lead {
    font-size: clamp(14px, 2.5vw, 16px);
  }
  
  p {
    font-size: clamp(14px, 2.5vw, 16px);
  }
}

@media (max-width: 480px) {
  .uv-section .lead {
    font-size: clamp(13px, 3vw, 15px);
  }
  
  p {
    font-size: clamp(13px, 3vw, 15px);
  }
}

/* Сети: 3→2→1 колонки */
.uv-grid{ 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: clamp(16px, 3vw, 24px);
}

/* Специальная сетка для первых шести карточек */
.uv-grid:has(.uv-card:first-child) {
  grid-template-columns: 360px 360px 360px;
  grid-template-rows: 310px 310px 310px;
  gap: 32px; /* Увеличено с 24px до 32px (примерно 0.7см) */
  align-items: start;
}

/* Сетка преимуществ теперь центрируется как обычная */
.wp-block-group.uv-grid.is-layout-flow.wp-block-group-is-layout-flow {
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

/* Убираем переопределение центрирования для секции преимуществ */
/* Секция преимуществ теперь центрируется как обычная секция */

/* Первая карточка - занимает две колонки, разделена на текст и график */
.uv-grid .uv-card:first-child,
.wp-block-group.uv-grid .wp-block-group.uv-card:first-child {
  grid-column: 1 / 3; /* Занимает первые две колонки */
  grid-row: 1; /* Первая строка */
  width: 752px; /* 360px + 360px + 32px gap */
  height: 310px;
  max-width: 100%;
  display: flex;
  flex-direction: row; /* Горизонтальное разделение */
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Левая часть - текст */
.uv-card:first-child .uv-card-text {
  flex: 1;
  padding-right: 24px;
  align-self: flex-start;
}

/* Правая часть - график */
.uv-card:first-child .uv-card-chart {
  flex: 1;
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: center;
}

/* SVG график роста */
.uv-growth-chart {
  width: 100%;
  height: 200px;
  max-width: 300px;
}

.uv-growth-chart svg {
  width: 100%; 
  height: 100%; 
}

/* Анимированная линия роста */
.uv-growth-line {
  stroke: var(--uv-primary);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  /* Анимация запускается через JavaScript при скролле */
}

/* Точки на графике */
.uv-growth-dots {
  fill: var(--uv-primary);
  opacity: 0;
  /* Анимация запускается через JavaScript при скролле */
}

/* Анимация рисования линии */
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* Анимация появления точек */
@keyframes showDots {
  to {
    opacity: 1;
  }
}

/* Сетка графика для первого блока */
.uv-growth-chart .uv-chart-grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

/* Подписи осей для первого блока */
.uv-growth-chart .uv-chart-labels {
  fill: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-family: inherit;
}

/* Вторая карточка - справа от первой */
.uv-grid .uv-card:nth-child(2),
.wp-block-group.uv-grid .wp-block-group.uv-card:nth-child(2) {
  grid-column: 3; /* Третья колонка */
  grid-row: 1; /* Первая строка */
  width: 360px;
  height: 310px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Третья карточка - ниже первой, слева, вытянута вертикально, разделена на текст и задачи */
.uv-grid .uv-card:nth-child(3),
.wp-block-group.uv-grid .wp-block-group.uv-card:nth-child(3) {
  grid-column: 1; /* Первая колонка */
  grid-row: 2 / 4; /* Занимает вторую и третью строки */
  width: 360px;
  height: 642px; /* 310px + 300px + 32px gap */
  max-width: 100%;
  display: flex;
  flex-direction: column; /* Вертикальное разделение */
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Верхняя часть - текст */
.uv-card:nth-child(3) .uv-card-text {
  flex: 0 0 auto;
}

/* Нижняя часть - визуализация задач */
.uv-card:nth-child(3) .uv-card-tasks {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

/* Контейнер для задач */
.uv-tasks-visual {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Бокс с задачей */
.uv-task-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateX(-20px);
  /* Анимация запускается через JavaScript при скролле */
}

/* Анимация появления задач - все боксы появляются быстро */
.uv-task-box:nth-child(1) { animation-delay: 0.1s; }
.uv-task-box:nth-child(2) { animation-delay: 0.2s; }
.uv-task-box:nth-child(3) { animation-delay: 0.3s; }
.uv-task-box:nth-child(4) { animation-delay: 0.4s; }

/* Зеленая галочка */
.uv-task-check {
  width: 20px;
  height: 20px;
  background: #10B981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  /* Анимация запускается через JavaScript при скролле */
}

/* Анимация появления галочек - все галочки появляются после боксов, медленнее */
.uv-task-box:nth-child(1) .uv-task-check { animation-delay: 1.0s; }
.uv-task-box:nth-child(2) .uv-task-check { animation-delay: 1.4s; }
.uv-task-box:nth-child(3) .uv-task-check { animation-delay: 1.8s; }
.uv-task-box:nth-child(4) .uv-task-check { animation-delay: 2.2s; }

/* Иконка галочки */
.uv-task-check::before {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Текст задачи */
.uv-task-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
}

/* Анимации */
@keyframes slideInTask {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes showCheck {
  to {
    opacity: 1;
  }
}

/* Четвертая карточка - справа от третьей */
.uv-grid .uv-card:nth-child(4),
.wp-block-group.uv-grid .wp-block-group.uv-card:nth-child(4) {
  grid-column: 2; /* Вторая колонка */
  grid-row: 2; /* Вторая строка */
  width: 360px;
  height: 310px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Пятая карточка - справа от четвертой */
.uv-grid .uv-card:nth-child(5),
.wp-block-group.uv-grid .wp-block-group.uv-card:nth-child(5) {
  grid-column: 3; /* Третья колонка */
  grid-row: 2; /* Вторая строка */
  width: 360px;
  height: 310px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Шестая карточка - занимает две колонки в третьей строке, справа, разделена на текст и ноутбук */
.uv-grid .uv-card:nth-child(6),
.wp-block-group.uv-grid .wp-block-group.uv-card:nth-child(6) {
  grid-column: 2 / 4; /* Занимает вторую и третью колонки */
  grid-row: 3; /* Третья строка */
  width: 752px; /* 360px + 360px + 32px gap */
  height: 300px;
  max-width: 100%;
  display: flex;
  flex-direction: row; /* Горизонтальное разделение */
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  margin: 0 auto;
  justify-self: center;
}

/* Левая часть - текст */
.uv-card:nth-child(6) .uv-card-text {
  flex: 1;
  padding-right: 24px;
  align-self: flex-start;
}

/* Правая часть - дашборд */
.uv-card:nth-child(6) .uv-card-laptop {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: center;
}

/* Контейнер дашборда */
.uv-dashboard-container {
  width: 280px;
  height: 200px;
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

/* Заголовок дашборда */
.uv-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.uv-dashboard-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.uv-dashboard-period {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  margin: 0;
}

/* Метрики */
.uv-dashboard-metrics {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

.uv-metric {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  position: relative;
}

.uv-metric-value {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  opacity: 0;
  /* Анимация запускается через JavaScript при скролле */
}

.uv-metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 8px;
  margin: 2px 0 0 0;
}

.uv-metric-checkbox {
    position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  opacity: 0;
  /* Анимация запускается через JavaScript при скролле */
}

.uv-metric-checkbox.blue {
  background: #3b82f6;
  animation-delay: 0.5s;
}

.uv-metric-checkbox.purple {
  background: #8b5cf6;
  animation-delay: 1s;
}

.uv-metric-checkbox.green {
  background: #10b981;
  animation-delay: 1.5s;
}

.uv-metric-checkbox::before {
  content: '✓';
  color: white;
  font-weight: bold;
}

/* График */
.uv-dashboard-chart {
  width: 100%;
  height: 80px;
  position: relative;
}

.uv-chart-svg {
  width: 100%;
    height: 100%;
}

/* Сетка графика для дашборда */
.uv-dashboard-chart .uv-chart-grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.5;
}

/* Оси для дашборда */
.uv-dashboard-chart .uv-chart-axis {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

/* Подписи осей для дашборда */
.uv-dashboard-chart .uv-chart-labels {
  fill: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  font-family: monospace;
}

/* Анимированные линии для дашборда */
.uv-dashboard-chart .uv-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  /* Анимация запускается через JavaScript при скролле */
}

.uv-dashboard-chart .uv-chart-line.clicks {
  stroke: #3b82f6;
  animation-delay: 0.5s;
}

.uv-dashboard-chart .uv-chart-line.impressions {
  stroke: #8b5cf6;
  animation-delay: 1s;
}

/* Белая тема для дашборда */
[data-theme="light"] .uv-dashboard-container {
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .uv-dashboard-title {
  color: #000;
}

[data-theme="light"] .uv-dashboard-period {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .uv-metric {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .uv-metric-value {
  color: #000;
}

[data-theme="light"] .uv-metric-label {
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-grid {
  stroke: rgba(0, 0, 0, 0.4) !important;
  stroke-width: 1.5 !important;
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-axis {
  stroke: rgba(0, 0, 0, 0.6) !important;
  stroke-width: 1.5 !important;
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-labels {
  fill: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-line.clicks {
  stroke: #1d4ed8 !important;
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-line.impressions {
  stroke: #7c3aed !important;
}

/* Дополнительные стили для белой темы дашборда */
[data-theme="light"] .uv-dashboard-chart .uv-chart-svg {
  background: transparent;
}

[data-theme="light"] .uv-dashboard-chart .uv-chart-svg .dashboard-bg {
  fill: url(#dashboardGridLight) !important;
}

/* Белая тема для первого блока (график роста) */
[data-theme="light"] .uv-growth-chart .uv-chart-grid {
  stroke: rgba(0, 0, 0, 0.4) !important;
  stroke-width: 1.5 !important;
}

/* Стили для осей (line элементы) в первом блоке */
[data-theme="light"] .uv-growth-chart line.uv-chart-grid {
  stroke: rgba(0, 0, 0, 0.8) !important;
  stroke-width: 2.5 !important;
}

/* Максимально специфичные селекторы для осей */
[data-theme="light"] .uv-card:first-child .uv-card-chart .uv-growth-chart line.uv-chart-grid {
  stroke: #000000 !important;
  stroke-width: 3px !important;
  opacity: 1 !important;
}

[data-theme="light"] .uv-growth-chart .uv-chart-labels {
  fill: rgba(0, 0, 0, 0.7) !important;
}

/* Дополнительные стили для текстовых элементов в первом блоке */
[data-theme="light"] .uv-growth-chart text.uv-chart-labels {
  fill: rgba(0, 0, 0, 0.9) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Максимально специфичные селекторы для подписей */
[data-theme="light"] .uv-card:first-child .uv-card-chart .uv-growth-chart text.uv-chart-labels {
  fill: #000000 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

[data-theme="light"] .uv-growth-chart .growth-bg {
  fill: url(#gridLight) !important;
}

/* Фон для контейнера графика в белой теме */
[data-theme="light"] .uv-card:first-child .uv-card-chart {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .uv-growth-chart {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

/* Белая тема для блока "Просто и прозрачно" */
[data-theme="light"] .uv-task-box {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .uv-task-text {
  color: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="light"] .uv-task-check {
  background: #10B981 !important;
}

[data-theme="light"] .uv-task-check::before {
  color: white !important;
}

/* Анимации */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showCheckbox {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}


/* Адаптивность сеток */

/* Две колонки для "Обо мне" и подобных */
.uv-two-col{ 
  display: grid; 
  grid-template-columns: 0.42fr 0.58fr; 
  gap: 24px;
  align-items: center;
}

@media (max-width: 1200px){ 
  .uv-two-col{ 
    grid-template-columns: 1fr; 
  } 
}

/* Картинки безопасные */
img{ 
  max-width: 100%; 
  height: auto; 
}

/* Кнопки одинаковые на 1366/1920 */
.uv-glass-btn, .wp-block-button__link{ 
  height: 44px; 
  padding: 0 20px; 
  font-weight: 600; 
  font-size: clamp(14px, 1.6vw, 16px); 
}

/* FAQ: аккуратные details/summary */
.uv-faq details{ 
  border: 1px solid rgba(0,0,0,.08); 
  border-radius: 12px; 
  padding: 14px 16px; 
  margin: 10px 0; 
  background: rgba(0,0,0,.02); 
}

.uv-faq summary{ 
  cursor: pointer; 
  font-weight: 600; 
  outline: none; 
}

.uv-faq details[open]{ 
  background: rgba(0,0,0,.04); 
}

/* FAQ стрелочка-индикатор */
.uv-faq summary::marker{ 
  content: ""; 
}

.uv-faq summary::after{
  content: "▾"; 
  display: inline-block; 
  margin-left: 8px; 
  transition: transform .2s ease;
}

.uv-faq details[open] summary::after{ 
  transform: rotate(180deg); 
}

/* Кнопка "наверх" - удалена, используется liquid glass версия ниже */

/* ================== CASES SLIDER POLISH ================== */

/* Обёртки слайдера - удалены старые стили */

/* Pricing */
.uv-price-card h3 { margin-top:0; }
.uv-price { font-size: 2rem; font-weight:800; }

/* FAQ */
.uv-faq details { border:1px solid var(--uv-border); border-radius: var(--uv-radius); padding: 14px 18px; background: var(--uv-bg); }
.uv-faq summary { cursor:pointer; font-weight:600; }



/* ================== Section Styles ================== */

/* Section anchors */
#top, #about, #advantages, #cases, #reviews, #pricing, #faq {
  position: relative;
  scroll-margin-top: calc(var(--uv-header-height) + var(--uv-header-margin) * 2);
  height: 0;
  margin: 0;
  padding: 0;
  display: block;
}

/* Section spacing */
.uv-section {
  padding: clamp(40px, 6vw, 80px) 0;
  position: relative;
}

.uv-section h2 {
  margin-bottom: clamp(32px, 5vw, 48px);
  }
  
/* About section styles - removed duplicate section styles */

.uv-about-text p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--uv-text);
}

.uv-about-text .lead {
  font-size: clamp(18px, 2.5vw, 20px);
  font-weight: 500;
  color: var(--uv-text);
  margin-bottom: 24px;
}

.uv-about-text strong {
  color: var(--uv-primary);
  font-weight: 600;
}

/* About list styles */
.uv-about-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.uv-about-list li {
  margin-bottom: 12px;
  padding: 8px 0;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.5;
  color: var(--uv-text);
}

/* Price cards */
.uv-price-card h3 {
  margin-top: 0;
  color: var(--uv-primary);
  text-align: center;
}

.uv-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--uv-primary);
  text-align: center;
  margin: 16px 0;
}

.uv-price-card p {
  line-height: 1.6;
}

.uv-price-card ul {
  list-style: none;
  padding: 0;
}

.uv-price-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--uv-border);
  line-height: 1.6;
}

.uv-price-card li:last-child {
  border-bottom: none;
}

:root{
  --uv-edge-gap: clamp(12px, 2vw, 1cm); /* отступ от левого края */
  --uv-to-top-bottom: 120px;            /* базовое расстояние от низа */
}

/* Back to top button */
.uv-back-to-top{
  position: fixed;
  left: auto !important;
  right: var(--uv-edge-gap) !important;  /* справа */
  bottom: var(--uv-to-top-bottom);
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--uv-text); font-size: 12px; font-weight: 600;
  cursor: pointer; z-index: 998;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  line-height: 1.2; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: bottom .2s ease, transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  opacity: 0; pointer-events: none;              /* скрыта наверху страницы */
}

.uv-back-to-top:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: var(--uv-primary); color: #fff;
  /* Неоновый эффект при hover */
  filter: drop-shadow(0 0 8px #A78BFA) drop-shadow(0 0 16px #7C3AED) drop-shadow(0 0 24px #6D28D9);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.6), 0 0 40px rgba(124, 58, 237, 0.4), 0 8px 24px rgba(0,0,0,0.15);
}

/* Тёмная тема - Liquid Glass */
[data-theme="dark"] .uv-back-to-top{
  background: rgba(18,22,28,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.1);
}

[data-theme="dark"] .uv-back-to-top:hover{
  background: var(--uv-primary); 
  color: #fff;
  border-color: var(--uv-primary);
  box-shadow: 0 8px 32px rgba(124,58,237,0.4), inset 0 1px rgba(255,255,255,0.2);
}

/* Белая тема - Liquid Glass */
[data-theme="light"] .uv-back-to-top{
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #1f2937 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.8) !important;
}

[data-theme="light"] .uv-back-to-top:hover{
  background: rgba(255,255,255,0.9) !important;
  color: #1f2937 !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 12px 50px rgba(0,0,0,0.15), inset 0 1px rgba(255,255,255,0.9) !important;
}

/* iPhone safe area */
@supports(padding: max(0px)){
  .uv-back-to-top{
    right: max(var(--uv-edge-gap), env(safe-area-inset-right)) !important;
  }
}

/* компактнее на мобилке */
@media (max-width: 900px){
  :root{ --uv-edge-gap: 12px; }
  .uv-back-to-top{ width: 44px; height: 44px; }
}

/* ================== Header Layout Fixes ================== */
/* Visual order without HTML reordering */
.uv-header-controls .uv-messengers{ order: 1; }
.uv-header-controls .site-phone{ order: 2; }
.uv-header-controls .uv-glass-btn, .uv-header-controls .wp-block-button, .uv-header-controls .wp-block-button__link{ 
  order: 98; 
  font-size: 16px !important;
  font-weight: 600 !important;
}
.uv-header-controls #uv-theme-toggle{ order: 99; }
.uv-header-controls .uv-burger{ order: 10; }
.uv-header-controls .uv-lang, .uv-header-controls [class*="lang"], .uv-header-controls .wp-block-shortcode{ display:none; }

/* ================== About Section Layout Fix ================== */

/* ширина секции "Обо мне": тянем на всю ширину, без ограничения Gutenberg */
.uv-section.alignfull .is-layout-constrained {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/* поля от края экрана (как ты хотел ~4 см на десктопе) */
.uv-section.alignfull .uv-container,
.uv-section.alignfull .uv-gutters-4cm {
  padding-inline: 4cm;         /* для about можно любое значение */
}
@media (max-width: 1200px){
  .uv-section.alignfull .uv-container,
  .uv-section.alignfull .uv-gutters-4cm { padding-inline: 24px; }
}
@media (max-width: 768px){
  .uv-section.alignfull .uv-container,
  .uv-section.alignfull .uv-gutters-4cm { padding-inline: 16px; }
}

/* базовая сетка */
.uv-two-col{
  display:grid;
  grid-template-columns: 0.42fr 0.58fr; /* или 1fr 1fr — по вкусу */
  align-items:start;
  gap: 0;  /* зазор сделаем внутренними паддингами колонок */
}

/* отталкивание от центра */
.uv-about-text   { padding-right: clamp(24px, 3vw, 40px); }

/* защита: текст не расширяет колонку, пустые абзацы не мешают */
.uv-two-col > * { min-width: 0; }
.uv-about-text p:empty { display:none; }

/* на узких экранах — одна колонка и обычные внутренние поля */
@media (max-width:1200px){
  .uv-two-col{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .uv-about-text{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ================== Mobile Layout Fix ================== */

/* 0) Безопасно режем любой горизонтальный скролл */
html, body { max-width: 100%; overflow-x: hidden; }

/* 1) Любые alignfull-блоки не должны сужаться Гутенбергом на мобилке */
@media (max-width: 900px){
  .alignfull .is-layout-constrained {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* 2) Единые внутренние поля секций на мобилке (контейнеры) */
@media (max-width: 900px){
  .uv-gutters-4cm, .uv-container {
    padding-inline: 16px !important; /* один источник правды */
    box-sizing: border-box;
  }
  /* если где-то остались паддинги у .wp-site-blocks — уберём */
  .wp-site-blocks { padding: 0 !important; }
}

/* 3) About и другие двухколоночные блоки: стопка на мобилке */
@media (max-width: 900px){
  .uv-two-col{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start;
  }
  /* убираем внутренние отступы колонок, чтобы ничего не «толкало» вбок */
  .uv-two-col > .uv-about-text,
  .uv-two-col > .uv-photo-column,
  .uv-two-col > figure { padding: 0 !important; }
  /* чтобы текст не распирал колонку */
  .uv-two-col > * { min-width: 0; }
}

/* 4) Медиа — безопасные размеры на мобилке */
@media (max-width: 900px){
  img, video { max-width: 100%; height: auto; display: block; }
  .uv-case-media { aspect-ratio: auto; } /* графики/скриншоты не рвут высоту */
}

/* 5) Хедер на мобилке — без 100vw/transform (на всякий случай) */
@media (max-width: 900px){
  #siteHeader{
    left:auto !important; right:auto !important; transform:none !important;
    width:auto !important; max-width:100% !important; margin:0 auto !important;
    padding-inline: 12px;
  }
}


/* ================== About Section Photo & Button Styles ================== */

/* Контейнер для фото в About (как в hero) */
.uv-about-photo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: fit-content;
  overflow: visible;
}

/* Фон за фото в About (отдельно от hero) */
.uv-about-photo-container .uv-photo-background {
  position: absolute !important;
  top: -30px !important;
  left: -30px !important;
  right: -30px !important;
  bottom: -30px !important;
  background: radial-gradient(circle at center, rgba(124,58,237,0.4) 0%, rgba(167,139,250,0.3) 40%, transparent 70%) !important;
  border-radius: 20px !important;
  z-index: -1 !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  width: calc(100% + 60px) !important;
  height: calc(100% + 60px) !important;
  opacity: 1 !important;
}

/* Само фото в About */
.uv-about-photo {
  border-radius: 16px;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: cover;
  opacity: 0.9;
}

/* На мобилке делаем адаптивным */
@media (max-width: 768px) {
  .uv-about-photo {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  .uv-about-photo-container .uv-photo-background {
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    filter: blur(60px);
  }
}

/* Light theme */
body.light-theme .uv-about-photo-container .uv-photo-background {
  background: radial-gradient(circle at center, rgba(124,58,237,0.4) 0%, rgba(167,139,250,0.3) 40%, transparent 70%) !important;
}

/* Dark theme adjustment */
:root.uv-dark .uv-about-photo-container .uv-photo-background {
  background: radial-gradient(circle at center, rgba(167,139,250,0.5) 0%, rgba(196,181,253,0.4) 40%, transparent 70%) !important;
}

/* Стили для колонки с фото и кнопкой */
.uv-photo-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.uv-photo-column .uv-glass-btn {
  margin: 0;
  float: none;
  text-align: center;
}

/* ================== About Section Text Shift ================== */

/* Базовые стили без сдвигов */
.uv-about-text {
  text-align: left;
}

.uv-about-text h3,
.uv-about-text .lead,
.uv-about-text p {
  text-align: left !important;
}

/* ================== Cases Section Width ================== */

/* Раздел "Кейсы" - базовые стили */
.uv-cases-section .uv-container {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 0 12px;
}

.uv-cases-section {
  padding: clamp(40px, 6vw, 80px) 0;
}

/* ================== Modal Form Styles ================== */

/* Модальное окно */
.uv-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.uv-modal.show {
  visibility: visible;
  opacity: 1;
}

/* Затемнение фона */
.uv-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999998;
}

/* Темная тема - более светлое затемнение */
:root.uv-dark .uv-modal-backdrop {
  background: rgba(255, 255, 255, 0.1);
}

/* Контент модального окна */
.uv-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 1000000;
}

/* Темная тема для контента */
:root.uv-dark .uv-modal-content {
  background: #1f2937;
  color: #ffffff;
}

/* Кнопка закрытия */
.uv-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.uv-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #374151;
}

:root.uv-dark .uv-modal-close {
  color: #9ca3af;
}

:root.uv-dark .uv-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Заголовок формы */
.uv-modal-content h2 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px 0;
  color: #1f2937;
}

:root.uv-dark .uv-modal-content h2 {
  color: #ffffff;
}

/* Подзаголовок */
.uv-modal-content > p {
  text-align: center;
  color: #6b7280;
  margin: 0 0 30px 0;
  font-size: 16px;
}

:root.uv-dark .uv-modal-content > p {
  color: #9ca3af;
}

/* Кнопки мессенджеров */
.uv-messenger-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  justify-content: center;
}

.uv-messenger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.uv-messenger-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.uv-messenger-btn img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.uv-messenger-btn span {
  display: none;
}

.uv-telegram-btn {
  background: rgba(0, 136, 204, 0.1);
  border-color: rgba(0, 136, 204, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.uv-telegram-btn:hover {
  background: rgba(0, 136, 204, 0.2);
  border-color: rgba(0, 136, 204, 0.5);
}

.uv-whatsapp-btn {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.uv-whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.5);
}

/* Dark theme styles for messenger buttons */
:root.uv-dark .uv-messenger-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

:root.uv-dark .uv-messenger-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

:root.uv-dark .uv-telegram-btn {
  background: rgba(0, 136, 204, 0.15);
  border-color: rgba(0, 136, 204, 0.3);
}

:root.uv-dark .uv-telegram-btn:hover {
  background: rgba(0, 136, 204, 0.25);
  border-color: rgba(0, 136, 204, 0.5);
}

:root.uv-dark .uv-whatsapp-btn {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.3);
}

:root.uv-dark .uv-whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.25);
  border-color: rgba(37, 211, 102, 0.5);
}

/* Mobile styles for messenger buttons */
@media (max-width: 419px) {
  .uv-messenger-buttons {
    flex-direction: row;
    gap: 16px;
    margin-bottom: 20px;
    justify-content: center;
  }
  
  .uv-messenger-btn {
    width: 45px;
    height: 45px;
  }
  
  .uv-messenger-btn img {
    width: 45px;
    height: 45px;
  }
}

/* Форма */
.uv-audit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Поля ввода */
.uv-audit-form input[type="text"],
.uv-audit-form input[type="tel"],
.uv-audit-form input[type="email"] {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #1f2937;
  box-sizing: border-box;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.uv-audit-form input[type="text"]:focus,
.uv-audit-form input[type="tel"]:focus,
.uv-audit-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.2);
}

.uv-audit-form input[type="text"]::placeholder,
.uv-audit-form input[type="tel"]::placeholder,
.uv-audit-form input[type="email"]::placeholder {
  color: rgba(31, 41, 55, 0.7);
}

:root.uv-dark .uv-audit-form input[type="text"],
:root.uv-dark .uv-audit-form input[type="tel"],
:root.uv-dark .uv-audit-form input[type="email"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

:root.uv-dark .uv-audit-form input[type="text"]:focus,
:root.uv-dark .uv-audit-form input[type="tel"]:focus,
:root.uv-dark .uv-audit-form input[type="email"]:focus {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

:root.uv-dark .uv-audit-form input[type="text"]::placeholder,
:root.uv-dark .uv-audit-form input[type="tel"]::placeholder,
:root.uv-dark .uv-audit-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Чекбокс согласия */
.uv-consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  width: 100%;
}

.uv-consent-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #7c3aed;
  cursor: pointer;
}

.uv-consent-checkbox label {
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
  cursor: pointer;
  margin: 0;
}

.uv-consent-checkbox label a {
  color: #7c3aed;
  text-decoration: none;
  font-weight: 500;
}

.uv-consent-checkbox label a:hover {
  text-decoration: underline;
}

/* Темная тема для чекбокса */
:root.uv-dark .uv-consent-checkbox label {
  color: #9ca3af;
}

:root.uv-dark .uv-consent-checkbox label a {
  color: #a78bfa;
}

:root.uv-dark .uv-consent-checkbox label a:hover {
  color: #c4b5fd;
}

/* Стили для страницы политики */
.uv-policy-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.uv-policy-content h1 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #1f2937;
}

.uv-policy-content h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 30px 0 15px 0;
  color: #374151;
}

.uv-policy-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #4b5563;
}

.uv-policy-content ul {
  margin: 15px 0;
  padding-left: 20px;
}

.uv-policy-content li {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #4b5563;
}

.uv-policy-content a {
  color: #7c3aed;
  text-decoration: none;
  font-weight: 500;
}

.uv-policy-content a:hover {
  text-decoration: underline;
}

/* Темная тема для страницы политики */
:root.uv-dark .uv-policy-content {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

:root.uv-dark .uv-policy-content h1 {
  color: #ffffff;
}

:root.uv-dark .uv-policy-content h2 {
  color: #e5e7eb;
}

:root.uv-dark .uv-policy-content p,
:root.uv-dark .uv-policy-content li {
  color: #d1d5db;
}

:root.uv-dark .uv-policy-content a {
  color: #a78bfa;
}

:root.uv-dark .uv-policy-content a:hover {
  color: #c4b5fd;
}

/* Контейнер для телефона */
.uv-phone-input {
  display: flex;
  align-items: center;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.uv-phone-input:focus-within {
  border-color: #7c3aed;
}

:root.uv-dark .uv-phone-input {
  background: #374151;
  border-color: #4b5563;
}

/* Флаг */
.uv-flag {
  font-size: 18px;
  margin: 0 8px;
  display: flex;
  align-items: center;
}

/* Селект кода страны */
.uv-phone-input select {
  border: none;
  background: none;
  padding: 16px 8px;
  font-size: 16px;
  color: #1f2937;
  cursor: pointer;
  outline: none;
}

:root.uv-dark .uv-phone-input select {
  color: #ffffff;
}

/* Поле телефона */
.uv-phone-input input {
  flex: 1;
  border: none;
  padding: 16px 20px;
  font-size: 16px;
  background: none;
  outline: none;
}

/* Кнопка отправки */
.uv-submit-btn {
  width: auto;
  min-width: 200px;
  padding: 16px 32px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.uv-submit-btn:hover {
  background: #6d28d9;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.uv-submit-btn:active {
  transform: translateY(0);
}

/* Текст о конфиденциальности */
.uv-privacy-text {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

:root.uv-dark .uv-privacy-text {
  color: #6b7280;
}

/* Кнопка "Хочу аудит" */
.uv-audit-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  border: none;
  padding: calc(16px + 10%) calc(32px + 10%);
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  min-height: calc(48px + 10%);
  min-width: calc(200px + 10%);
}

/* Сдвиг кнопки аудита вправо на 30% (только для русской версии) */
body:not(.en-version) .uv-hero-buttons .uv-audit-btn,
body:not(.en-version) div[style*="text-align: center"] .uv-audit-btn {
  margin-left: 30%;
}

.uv-audit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  color: #ffffff;
  text-decoration: none;
}

.uv-audit-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}

/* Адаптивность */
@media (max-width: 768px) {
  .uv-modal {
    padding: 10px;
  }
  
  .uv-modal-content {
    padding: 30px 20px;
  }
  
  .uv-modal-content h2 {
    font-size: 24px;
  }
  
  .uv-audit-form input[type="text"],
  .uv-audit-form input[type="tel"],
  .uv-audit-form input[type="email"],
  .uv-phone-input {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .uv-submit-btn {
    padding: 14px 24px;
    font-size: 16px;
    min-width: 180px;
  }
}

/* ================== Scroll Spy Navigation ================== */

/* активный пункт в шапке/попапе */
#siteHeader .wp-block-navigation a.is-active,
#siteHeader .wp-block-navigation-item a.is-active,
#siteHeader .wp-block-navigation__container a.is-active,
#uv-menu .wp-block-navigation a.is-active {
  color: var(--uv-primary) !important;
  background: rgba(124,58,237,.08) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* запас: чтобы якорь не прятался под фикс-шапку */
[data-spy-section] { 
  scroll-margin-top: calc(var(--uv-header-height) + var(--uv-header-top) + 12px);
}

/* ================== Cases Slider ================== */

/* === размеры/зазор === */
:root{ --uv-gap: 20px; }

/* секция слайдера */
.uv-cases-slider{ 
  position: relative; 
  padding: 40px 0 calc(100px + 1cm) 0; 
  max-width: 1200px; 
  margin: 0 auto;
  min-height: calc(100% + 2cm);
}

/* Cases section container */
.uv-cases {
  padding: clamp(40px, 6vw, 80px) 0;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.uv-cases-viewport{ 
  overflow: hidden; 
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  max-width: 100%;
}

.uv-cases-track{ 
  display: flex; 
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Новая структура кейсов - слайды переключаются через display */
.uv-cases .uv-case-slide {
  flex: 0 0 100%;
  width: 100%;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  min-height: 600px;
}

.uv-cases .uv-case-slide.active {
  display: grid;
}

/* слайд = две колонки с пропорциями 1070×760 */
.uv-case-slide{
  flex: 0 0 100%;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--uv-gap);
  align-items: stretch;
  min-height: calc(450px + 1cm);
}

.uv-case-slide.active{
  display: grid;
}

/* Кейс без картинки - только текст */
.uv-case-slide.uv-text-only{
  grid-template-columns: 1fr;
  justify-items: center;
}

.uv-case-slide.uv-text-only .uv-case-content{
  max-width: 800px;
  text-align: center;
}

/* Пустая рамка для будущего фото */
.uv-box.uv-img .uv-placeholder {
  width: 100%;
  height: 100%;
  background: var(--uv-bg-secondary);
  border: 2px dashed var(--uv-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--uv-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.uv-box.uv-img .uv-placeholder:hover {
  border-color: var(--uv-primary);
  color: var(--uv-primary);
  background: rgba(124, 58, 237, 0.05);
}

/* Адаптивный размер шрифта для кейсов */
.uv-case-content {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.uv-case-content h3 {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.3;
  margin-bottom: 0px;
  flex-shrink: 0;
}

.uv-case-content p {
  font-size: clamp(13px, 1.1vw, 15px);
  margin-bottom: 0px;
  margin-top: 0px;
  flex-shrink: 0;
  flex-grow: 1;
}

.uv-case-content ul {
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.4;
  margin-bottom: 0px;
  margin-top: 0px;
  flex-grow: 1;
}

.uv-case-content ul li {
  margin-bottom: 0px;
  margin-top: 0px;
  flex-shrink: 0;
}

.uv-case-content ul li strong {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
}


.uv-case-content .uv-glass-btn {
  margin-top: 13px;
  flex-shrink: 0;
  align-self: flex-start;
  padding: clamp(3px, 0.6vw, 6px) clamp(16px, 2vw, 24px) !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
  min-height: clamp(20px, 2vw, 26px) !important;
  max-height: clamp(20px, 2vw, 26px) !important;
}

/* Адаптивные размеры текста в зависимости от количества контента */
.uv-case-content.uv-text-large ul {
  font-size: clamp(13px, 1.1vw, 15px);
}

.uv-case-content.uv-text-medium ul {
  font-size: clamp(12px, 1vw, 14px);
}

.uv-case-content.uv-text-small ul {
  font-size: clamp(11px, 0.9vw, 13px);
}

.uv-case-content.uv-text-small ul li {
  margin-bottom: 4px;
}

.uv-case-content.uv-text-medium ul li {
  margin-bottom: 5px;
}

.uv-case-content.uv-text-large ul li {
  margin-bottom: 6px;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .uv-case-content {
    font-size: 14px;
    padding: 0;
  }
  
  .uv-case-content h3 {
    font-size: 18px !important;
  }
  
  .uv-case-content p {
    font-size: 13px;
  }
  
  .uv-case-content ul {
    font-size: 12px;
  }
  
  .uv-case-result {
    font-size: 13px;
  }
  
  .uv-case-content .uv-glass-btn {
    padding: 4px 16px !important;
    font-size: 12px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }
}

/* Адаптивность для больших экранов */
@media (min-width: 1400px) {
  .uv-case-content {
    font-size: clamp(15px, 1.1vw, 17px);
    padding: 0;
  }
  
  .uv-case-content h3 {
    font-size: clamp(20px, 1.8vw, 26px) !important;
  }
  
  .uv-case-content ul {
    font-size: clamp(13px, 0.9vw, 15px);
  }
  
  .uv-case-content .uv-glass-btn {
    padding: 6px 20px !important;
    font-size: 14px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
}

/* Адаптивность для очень широких экранов */
@media (min-width: 1600px) {
  .uv-case-content {
    width: 100%;
  }
  
  .uv-case-content .uv-glass-btn {
    padding: 8px 24px !important;
    font-size: 15px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
}

/* окна с поддержкой пропорций 1070×760 */
.uv-box{ 
  width: 100%; 
  aspect-ratio: 1070 / 760;
  display: flex;
  flex-direction: column;
}

.uv-box.uv-text {
  min-height: calc(450px + 1cm);
  max-height: calc(550px + 1cm);
  max-width: 100%;
  overflow: hidden;
}

.uv-img, .uv-text{ 
  display: block; 
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* стили для левого окна (картинка) */
.uv-img {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* стили для правого окна (текст) */
.uv-text {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* навигация */
.uv-cases-nav {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

/* На мобильных устройствах навигация должна быть статичной */
@media (max-width: 419px) {
  .uv-cases-nav {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    display: none !important; /* Скрываем навигацию на мобилке */
    justify-content: center !important;
    gap: 10px !important;
  }
  
  /* Адаптивные кнопки "ПОДРОБНЕЕ" в кейсах */
  .uv-case-content .uv-glass-btn {
    width: 100% !important;
    max-width: 200px !important;
    margin: 15px auto 0 auto !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Адаптивные стили для .uv-box.uv-text */
  .uv-box.uv-text {
    min-height: auto !important;
    max-height: none !important;
    padding: 20px 15px !important;
    aspect-ratio: auto !important;
  }
  
  .uv-text {
    padding: 20px 15px !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

.uv-nav{
  width: 48px; 
  height: 48px; 
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3); 
  background: rgba(0,0,0,0.5); 
  color: #fff; 
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.uv-nav:hover{
  background: rgba(124,58,237,0.8);
  border-color: rgba(124,58,237,0.8);
  transform: scale(1.1);
}

/* Белая тема для навигации */
[data-theme="light"] .uv-nav {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1f2937 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.8) !important;
}

[data-theme="light"] .uv-nav:hover {
  background: rgba(124,58,237,0.8) !important;
  border-color: rgba(124,58,237,0.8) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 12px 50px rgba(124,58,237,0.4), inset 0 1px rgba(255,255,255,0.2) !important;
}

/* точки */
.uv-dots{ 
  position: absolute; 
  left: 50%; 
  bottom: 20px; 
  transform: translateX(-50%); 
  display: flex; 
  gap: 12px; 
  z-index: 10;
}

.uv-dots button{
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  border: 0; 
  background: rgba(255,255,255,0.3); 
  cursor: pointer;
  transition: all 0.3s ease;
}

.uv-dots button[aria-current="true"]{ 
  background: var(--uv-primary); 
  transform: scale(1.2);
}

/* адаптив */
@media (max-width: 992px){
  .uv-case-slide{ 
    grid-template-columns: 1fr; 
    gap: 16px;
  }
  
  .uv-box{ 
    aspect-ratio: auto; 
    min-height: 300px;
  }
  
  .uv-cases-nav {
    bottom: 40px;
  }
  
  .uv-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* ================== Кнопки в кейсах ================== */
.uv-case-content .uv-glass-btn {
  min-height: 43px !important;
  font-weight: 400 !important;
  display: block !important;
  margin: 13px auto 0 auto !important;
  width: calc(fit-content + 5%) !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================== Кнопка в подвале ================== */
footer .uv-glass-btn {
  width: auto !important;
  min-width: 150px !important;
  max-width: 200px !important;
  padding: 10px 20px !important;
}

/* ================== Новые тарифные карточки ================== */

/* Базовые переменные и темы */
* { box-sizing: border-box; }

:root{
  --radius-lg: 16px;
  --radius-md: 12px;
  --gap: 12px;

  /* Светлая тема по умолчанию */
  --bg: #f5f5f7;
  --text: #0b0f14;           /* черный текст на светлой теме */
  --muted: #6b7280;
  --surface: #fbfbfd;         /* светло-серые прямоугольники */
  --surface-2: #f9f9fb;
  --border: #e7eaf0;

  --accent-1: #7c3aed;        /* градиент кнопки */
  --accent-2: #a855f7;
}

/* Тёмная тема */
[data-theme="dark"] .cards {
  --bg: #0f1217;
  --text: #e5e7eb;           /* белый текст на темной теме */
  --muted: #9aa3af;
  --surface: #161a22;         /* светло-серые в тёмной теме → графит */
  --surface-2: #151922;
  --border: #242b36;
}

/* Liquid glass для темной темы - только фреймы (как в шапке) */
[data-theme="dark"] .cards .icon-frame,
[data-theme="dark"] .cards .title-frame,
[data-theme="dark"] .cards .card-bottom {
  background: rgba(18,22,28,0.56);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px rgba(255,255,255,0.04);
}

/* Белая тема для тарифных карточек */
[data-theme="light"] .cards {
  --bg: #ffffff;
  --text: #1f2937;           /* темный текст на светлой теме */
  --muted: #6b7280;
  --surface: #f9fafb;         /* светлые поверхности */
  --surface-2: #f3f4f6;
  --border: #e5e7eb;
}

/* Liquid glass для белой темы - только фреймы */
[data-theme="light"] .cards .icon-frame,
[data-theme="light"] .cards .title-frame,
[data-theme="light"] .cards .card-bottom {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.8) !important;
}

/* Сетка для 3 карточек */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 360px); /* три фиксированных блока в ряд */
  gap: 30px; /* расстояние между блоками */
  row-gap: 30px; /* вертикальное расстояние между строками */
  background: transparent; /* убираем фон, используем системный */
  padding: 20px;
  color: var(--text);
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

/* Карточка 360×470 и «три фрейма» */
.card{
  width: 360px;
  height: 470px;                      /* 150px (top) + 15px (gap) + 320px (bottom) - 15px (padding) */
  background: transparent;            /* прозрачный фон карточки */
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;                          /* 0.4см расстояние между блоками */
}

/* Увеличенное расстояние для первой карточки (МИНИ) */
.card:first-child {
  margin-right: 40px;                 /* 1см дополнительного расстояния справа */
}

.card-top{
  width: 100%;
  height: 150px;
  display: grid;
  grid-template-columns: 120px 1fr;   /* слева иконка 120px, справа текстовый блок */
  gap: 20px;                          /* увеличенное расстояние между блоками */
  align-items: center;
  justify-items: start;
}

/* 1) Фрейм с иконкой */
.icon-frame{
  width: 120px;
  height: 150px;
  border-radius: var(--radius-md);
  /* Liquid glass стиль как в шапке */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                   /* иконка не «вылезает» */
}
/* Стили для изображений батареек */
.battery-icon {
  width: 38px;
  height: 70px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  animation: batteryPulse 3s ease-in-out infinite;
}

.battery-icon:hover {
  transform: scale(1.05);
}

/* Анимации для разных уровней заряда */
.battery-mini {
  animation: batteryCharging 2s ease-in-out infinite;
}

.battery-standard {
  animation: batteryCharging 1.5s ease-in-out infinite;
}

.battery-gold {
  animation: batteryFullyCharged 3s ease-in-out infinite;
}


@keyframes batteryPulse {
  0% { 
    box-shadow: 0 0 5px rgba(124, 58, 237, 0.3);
  }
  100% { 
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
  }
}

/* Анимация мигания зарядки */
@keyframes batteryCharging {
  0% { 
    opacity: 0.6;
    filter: brightness(0.8);
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    filter: brightness(1.2);
    transform: scale(1.02);
  }
  100% { 
    opacity: 0.7;
    filter: brightness(0.9);
    transform: scale(1);
  }
}

/* Анимация полностью заряженной батарейки */
@keyframes batteryFullyCharged {
  0% { 
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));
    transform: scale(1);
  }
  25% { 
    opacity: 1;
    filter: brightness(1.1) drop-shadow(0 0 12px rgba(124, 58, 237, 0.8));
    transform: scale(1.02);
  }
  50% { 
    opacity: 1;
    filter: brightness(1.05) drop-shadow(0 0 10px rgba(167, 139, 250, 0.7));
    transform: scale(1.01);
  }
  75% { 
    opacity: 1;
    filter: brightness(1.1) drop-shadow(0 0 12px rgba(124, 58, 237, 0.8));
    transform: scale(1.02);
  }
  100% { 
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));
    transform: scale(1);
  }
}

/* Анимация мерцания */
@keyframes batteryShimmer {
  0% { 
    opacity: 0.3;
    transform: translateX(-100%);
  }
  50% { 
    opacity: 0.6;
  }
  100% { 
    opacity: 0.3;
    transform: translateX(100%);
  }
}

/* Анимация вспышки */
@keyframes batteryFlash {
  0% { 
    opacity: 0;
  }
  20% { 
    opacity: 0.8;
  }
  40% { 
    opacity: 0;
  }
  60% { 
    opacity: 0.6;
  }
  80% { 
    opacity: 0;
  }
  100% { 
    opacity: 0;
  }
}

/* 2) Фрейм с заголовком/ценой */
.title-frame{
  width: 100%;
  height: 150px;
  border-radius: var(--radius-md);
  /* Liquid glass стиль как в шапке */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.title-frame h3{
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--text) !important;
  font-weight: 700;
}
.title-frame p{
  margin: 0;
  color: var(--muted) !important;
  font-weight: 600;
}

/* 3) Нижний широкий фрейм */
.card-bottom{
  width: 100%;
  height: 320px;
  border-radius: var(--radius-md);
  /* Liquid glass стиль как в шапке */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.25);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.card-bottom p{ 
  margin: 0; 
  color: var(--text) !important;
  line-height: 1.6;
}
.card-bottom ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted) !important;
  margin-bottom: 20px;                /* небольшой отступ снизу */
}
.card-bottom li{
  color: var(--muted) !important;
  line-height: 1.6;
}

/* Кнопка */
.cta{
  position: absolute !important;
  bottom: 38px !important;                       /* 1см от низа (38px ≈ 1см) */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 260px !important;
  height: 70px !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
}
.cta:hover{ transform: translateX(-50%) !important; }
.cta:active{ transform: translateX(-50%) !important; opacity: 1 !important; }

/* Анимация батарей */
@keyframes batteryCharge{
  0% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.1);
    filter: brightness(1.2);
  }
  100% { 
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Анимация зарядки батареи */
@keyframes batteryChargeUp{
  0%   { 
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  30%  { 
    transform: translateY(-20px) scale(1.2);
    filter: brightness(1.5);
  }
  60%  { 
    transform: translateY(-40px) scale(1.1);
    filter: brightness(1.3);
  }
  100% { 
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* Анимация зарядки батарей только на мобильных устройствах */
@media (max-width: 768px) {
  .card:hover .battery-icon,
  .card:active .battery-icon,
  .card.tapped .battery-icon {
    animation: batteryChargeUp 1.1s ease-out 0s 1 both;
  }
}

/* Забота о людях с ограничением анимаций */
@media (prefers-reduced-motion: reduce){
  .battery-icon{ animation: none; }
  .card:hover .battery-icon,
  .card:active .battery-icon,
  .card.tapped .battery-icon { animation: none; }
}

/* Медиа-запрос для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Скрываем десктопный хедер на планшетах */
  #siteHeader {
    display: none !important;
  }
  
  /* Показываем мобильный хедер на планшетах */
  #siteHeaderMobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .card-top {
    width: 100%;
    max-width: 360px;
    height: 150px;
    grid-template-columns: 100px 1fr;
    gap: clamp(12px, 2vw, 16px);
    justify-items: start;
    align-items: center;
  }
  
  .card-bottom {
    width: 100%;
    max-width: 360px;
    height: 320px;
  }
  
  .icon-frame {
    width: 100px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .title-frame {
    width: 100%;
    height: 150px;
    padding: clamp(8px, 1.5vw, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .title-frame h3 {
    font-size: clamp(16px, 2.2vw, 18px);
  }
  
  .title-frame p {
    font-size: clamp(12px, 1.8vw, 14px);
  }
  
  .cta {
    width: clamp(180px, 55%, 220px) !important;
    height: clamp(45px, 5vw, 55px) !important;
    bottom: clamp(25px, 2.5vw, 30px) !important;
  }
  
  .battery-icon {
    width: clamp(24px, 2.5vw, 28px);
    height: clamp(45px, 5vw, 55px);
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 25px; /* увеличенное вертикальное расстояние */
    padding: 16px;
  }
  
  /* Убираем дополнительный отступ на мобильных */
  .card:first-child {
    margin-right: 0;
  }
  .card {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 420px;
    margin: 0 auto;
  }
  
  .card-top {
    width: 100%;
    max-width: 360px;
    height: 120px;
    grid-template-columns: 100px 1fr;
    gap: 15px;
  }
  
  .icon-frame {
    width: 100px;
    height: 120px;
  }
  
  .title-frame {
    width: 100%;
    max-width: 220px;
    height: 120px;
    padding: 8px 10px;
    align-items: center;
    text-align: center;
  }
  
  .title-frame h3 {
    font-size: 20px;
    font-weight: 700;
  }
  
  .title-frame p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cards {
    padding: 12px;
  }
  
  .card {
    padding: 12px;
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 400px;
  }
  
  .card-bottom {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 280px;
    padding: 16px;
    margin: 0 auto;
  }
  
  .card-bottom ul {
    margin-bottom: 12px;               /* небольшой отступ снизу на маленьких экранах */
  }
  
  .card-top {
    width: 100%;
    max-width: 360px;
    height: 100px;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
  
  .icon-frame {
    width: 80px;
    height: 100px;
  }
  
  .title-frame {
    width: 100%;
    max-width: 220px;
    height: 100px;
    padding: 6px 8px;
    align-items: center;
    text-align: center;
  }
  
  .title-frame h3 {
    font-size: 18px;
    font-weight: 700;
  }
  
  .title-frame p {
    font-size: 12px;
  }
  
  .cta {
    position: absolute !important;
    bottom: 25px !important;                     /* 1см от низа на маленьких экранах */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 200px !important;
    height: 50px !important;
    font-size: 12px !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
  }
  
  
  .card-bottom p {
    font-size: 13px;
  }
  
  .card-bottom li {
    font-size: 12px;
  }
}

/* ================== Общая адаптивность сайта ================== */

/* Адаптивность для больших экранов */
@media (min-width: 1400px) {
  .uv-container {
    width: min(1400px, 90vw);
  }
  
  .uv-section h2 {
    font-size: clamp(28px, 2.5vw, 40px);
  }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 360px) {
  .uv-container {
    padding: 0 8px;
  }
  
  .uv-section {
    padding: clamp(16px, 10vw, 24px) 0;
  }
  
  .uv-section h2 {
    font-size: clamp(16px, 6vw, 20px);
  }
  
  .uv-glass-btn {
    font-size: clamp(11px, 4vw, 13px) !important;
    padding: clamp(4px, 4vw, 6px) clamp(8px, 8vw, 16px) !important;
  }
}

/* Адаптивность для экстремально маленьких экранов (iPhone SE, старые Android) */
@media (max-width: 320px) {
  .uv-container {
    padding: 0 6px;
  }
  
  .uv-section {
    padding: clamp(12px, 8vw, 20px) 0;
  }
  
  .uv-section h2 {
    font-size: clamp(14px, 5vw, 18px);
    margin-bottom: 8px;
  }
  
  .uv-section .lead {
    font-size: clamp(11px, 2.5vw, 13px);
  }
  
  .uv-glass-btn {
    font-size: clamp(10px, 3.5vw, 12px) !important;
    padding: clamp(3px, 3vw, 5px) clamp(6px, 6vw, 12px) !important;
    min-height: 32px !important;
  }
  
  /* Уменьшаем отступы в карточках */
  .uv-card {
    padding: 12px !important;
  }
  
  .uv-card h4 {
    font-size: clamp(14px, 4vw, 16px) !important;
  }
  
  .uv-card p {
    font-size: clamp(11px, 2.5vw, 13px) !important;
  }
}

/* Адаптивность для ландшафтной ориентации на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
  .uv-section {
    padding: clamp(16px, 4vw, 24px) 0;
  }
  
  .uv-section h2 {
    margin-bottom: 12px;
  }
}

/* ================== Fullscreen Modal для кейсов ================== */
.uv-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.uv-fullscreen-modal.active {
  display: flex;
}

.uv-fullscreen-content {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 40px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.uv-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3);
  background: rgba(255,255,255,.9);
  color: #333;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uv-close-btn:hover {
  background: rgba(255,255,255,1);
}

/* ================== Lightbox для кейсов ================== */
.uv-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.uv-lightbox.open { 
  display: flex; 
}
.uv-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.uv-lightbox-close {
  position: absolute;
  top: 20px; 
  right: 20px;
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.4);
  color: #fff; 
  font-size: 20px;
  cursor: pointer;
}
.uv-lightbox-close:hover { 
  background: rgba(0,0,0,.6); 
}

/* ================== Case Detail Modal ================== */
.uv-case-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  box-sizing: border-box;
}

.uv-case-detail-modal.active {
  display: flex;
}

.uv-case-detail-content {
  position: relative;
  background: white;
  border-radius: 16px;
  max-width: 800px;
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
}

.uv-case-detail-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.9);
  color: #333;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.uv-case-detail-close:hover {
  background: rgba(255,255,255,1);
  transform: scale(1.1);
}

.uv-case-detail-header {
  padding: 40px 40px 20px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.uv-case-detail-header h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--uv-primary);
  line-height: 1.2;
}

.uv-case-detail-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.uv-case-detail-meta span {
  background: var(--uv-primary);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uv-case-detail-body {
  padding: 30px 40px 40px;
  overflow-y: auto;
  flex: 1;
}

.uv-case-detail-body h4 {
  color: var(--uv-primary);
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--uv-primary);
}

.uv-case-detail-body h4:first-child {
  margin-top: 0;
}

.uv-case-detail-body h5 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 25px 0 10px 0;
}

.uv-case-detail-body p {
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.uv-case-detail-body ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.uv-case-detail-body li {
  color: #555;
  line-height: 1.6;
  margin: 8px 0;
  position: relative;
}

.uv-case-detail-body li::marker {
  color: var(--uv-primary);
}

/* Responsive styles */
@media (max-width: 768px) {
  .uv-case-detail-modal {
    padding: 10px;
  }
  
  .uv-case-detail-content {
    max-height: 95vh;
    border-radius: 12px;
  }
  
  .uv-case-detail-header {
    padding: 30px 20px 15px;
  }
  
  .uv-case-detail-header h3 {
    font-size: 20px;
  }
  
  .uv-case-detail-body {
    padding: 20px;
  }
  
  .uv-case-detail-body h4 {
    font-size: 18px;
  }
  
  .uv-case-detail-body h5 {
    font-size: 15px;
  }
  
  .uv-case-detail-close {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
}

/* Специально для iPad Pro 1024x1366 и подобных */
@media (max-width: 1024px) and (min-height: 1024px) {
  /* Скрываем десктопный хедер */
  #siteHeader {
    display: none !important;
  }
  
  /* Показываем мобильный хедер */
  #siteHeaderMobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}