@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {  
  /* ГРАНИЦЫ */  
  --border-light: #E5E5E5;  
  --border-medium: #D8C4AF;  
  
  /* ШРИФТЫ */  
  --font-primary: 'Montserrat', sans-serif;  
  --font-secondary: 'Manrope', sans-serif;  
  --font-mono: 'Ubuntu', monospace;  
  
  /* РАЗМЕРЫ ШРИФТОВ - Desktop */  
  --font-size-p: 18px;  
--font-size-p-small: 12px; 

--font-size-h1: 72px;  
--font-size-h2: calc(var(--font-size-h1) / 1.6);  
--font-size-h3: calc(var(--font-size-h2) / 1.6); 
--font-size-num: calc(var(--font-size-h2) / 1.1);  
--font-size-description: calc(var(--font-size-num) / 1.9);  
  /* СКРУГЛЕНИЯ */  
  --border-radius-large: 16px;  
  --border-radius-medium: 8px;  
  --border-radius-small: 4px;  
  
  /* ВЫСОТЫ ЭЛЕМЕНТОВ */  
  --h-interactive: 52px;  
  --h-badge: 24px;  
  --h-code: 20px;  
  
  /* СИСТЕМА ОТСТУПОВ (3 значения) */  
  --spacing-large: 24px;      
  --spacing-medium: 16px;     
  --spacing-section: 160px;   
  
  /* КОНТЕЙНЕРЫ */  
  --container-max-width: 2559px;  
  --container-min-width: 1440px;  
  
  --dark: #000000;  
  --color-white: #FFFFFF;  
  --color-light-gray: #F8F9FA;  
  --color-beige: #E2D0BE;  
  --brand-color: #D8C4AF; 
  --gradient-beige-gray: linear-gradient(135deg, #D8C4AF 0%, #F8F9FA 100%);  

  --inside-padding: 16px;     
  --outside-padding: 24px;    
  --spacing-outside: 200px;
  --spacing-inside: 24px;
}

button {
    margin: 0;
    padding: 0;
    border: none; /* Убедитесь, что границы также убраны */
    background: transparent; /* Убираем фон по умолчанию */
}

 
  .metrics-label {
      font-size: var(--font-size-description);
      
      
  }

@media (max-width: 1920px) {

        :root {
  --font-size-h1: 68px;  
  --font-size-p: 16px;  
--font-size-h2: calc(var(--font-size-h1) / 1.8);  
--font-size-h3: calc(var(--font-size-h2) / 1.8); 
--font-size-num: calc(var(--font-size-h2) / 1.1);  
--font-size-description: calc(var(--font-size-num) / 1.9);  

        
        }
      

}


@media (max-width: 1620px) {

        :root {
  --font-size-h1: 68px;  
  --font-size-p: 16px;  

--font-size-h2: calc(var(--font-size-h1) / 1.7);  
--font-size-h3: calc(var(--font-size-h2) / 1.7); 
--font-size-num: calc(var(--font-size-h2) / 1.2);  
--font-size-description: calc(var(--font-size-num) / 1.9);  
        
        }
        
         
  .metrics-label {
         font-size: calc(var(--font-size-description) / 1.1);  

      
      
  }
      

}





@media (max-width: 1440px){

        :root {
  --font-size-h1: 62px;  
  
  --font-size-h2: calc(var(--font-size-h1) / 1.5);  
--font-size-h3: calc(var(--font-size-h2) / 1.5); 
--font-size-num: calc(var(--font-size-h2) / 1.1);  
--font-size-description: calc(var(--font-size-num) / 1.9);  
          }
      

}

/* Десктопные стили */
@media (max-width: 1280px) and (min-width: 1024px) {
    :root {
    
       --font-size-h1: 58px;
       
       --font-size-h2: calc(var(--font-size-h1) / 1.5);  
--font-size-h3: calc(var(--font-size-h2) / 1.5); 
--font-size-num: calc(var(--font-size-h2) / 1.1);  
--font-size-description: calc(var(--font-size-num) / 1.9);  

}
  .metrics-label {
         font-size: var(--font-size-p);  

      
  }
      
       

}

@media (max-width: 1024px) and (min-width: 768px) {
    :root {
        --font-size-h1: 42px;
        --font-size-h2: calc(var(--font-size-h1) / 1.6);  
--font-size-h3: calc(var(--font-size-h2) / 1.6); 
--font-size-num: calc(var(--font-size-h2) / 1.1);  
--font-size-description: calc(var(--font-size-num) / 1.6);  
        --inside-padding: 16px; 
        --outside-padding: 16px; 
        
        }
        
        
  .metrics-label {
         font-size: calc(var(--font-size-description) / 1.2);  
  }
     .two-columns {
        grid-template-columns: repeat(2, 1fr); /* Две колонки */
    }
     
   
}
     
    
    


/* Mobile Medium: 441px - 767px */
@media (max-width: 767px) and (min-width: 440px) {
    :root {
        --font-size-h1: 28px;
        --font-size-p: 16px;
        --font-size-h2: calc(var(--font-size-h1) / 1.2);  
--font-size-h3: calc(var(--font-size-h2) / 1.2); 
--font-size-num: calc(var(--font-size-h2) / 1.2);  
--font-size-description: 16px;
        
        
          --inside-padding: 16px; 
        --outside-padding: 8px; 
    }
    
    
    .two-columns {
        grid-template-columns: 1fr; /* Одна колонка для мобильных */
    }
    
    .Action-panel-hero-description {
    margin: 8px 10px;
   
}




}

/* Мобильные стили */
@media (max-width: 441px) {
    :root {
        
        --font-size-h1: 32px;
     
        --font-size-h2: calc(var(--font-size-h1) / 1.1);  
--font-size-h3: calc(var(--font-size-h2) / 1.2); 
--font-size-num: calc(var(--font-size-h2) / 1.2);  
--font-size-description: 16px;


        --inside-padding: 4px;  
        --outside-padding: 8px;
        --spacing-large: 16px;
        --spacing-medium: 8px;
  
    }
    
   
      .metrics-label {
         font-size: 16px;  

      
      
  }
    


}


    .two-columns {
        grid-template-columns: repeat(4, 1fr); /* Четыре колонки */
    }
}

  
    


/* Базовые стили */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  
}

#allrecords {
    width: 100%;
}

html {
     font-size: 14px; 
}
body {  
    display: flex;
    flex-direction: column; /* Элементы располагаются вертикально */
    justify-content: center; /* Выравнивание по вертикали */
     padding: var(--outside-padding);
    font-family: var(--font-primary);
    font-size: var(--font-size-p);
    color: var(--dark);
    background-color: var(--color-white); 
    box-sizing: border-box;
  /*user-select: none;*/
}

#allrecords ul {
    padding-left: 0;
}

/* Настраиваем стили выделения текста */
::selection {
    background-color: var(--brand-color); /* Цвет фона выделения */
    
    border-radius: 5px; /* Радиус скругления для выделения (не поддерживается во всех браузерах) */
}

/* Для Firefox и других браузеров, поддерживающих отдельный псевдокласс */
::-moz-selection {
    background-color: var(--brand-color); /* Цвет фона выделения для Firefox */
   
}


/* Контейнер для контента с максимальной шириной */
.main-container {
width: 100%;
  max-width: 2559px;
  margin: 0 auto; /* Центрирование контейнера */
  padding: 0; /* Отступы по бокам */
}

/* Секции */  
.section {  
    width: 100%;
  background-color: var(--color-white);  
  border-radius: var(--border-radius-medium);  
  margin-bottom: var(--spacing-medium);  
}

/* Колонки */
.three-fourths {
  width: 75%;
}

.one-fourth {
  width: 25%;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Две колонки по умолчанию */
    gap: var(--spacing-medium); /* Отступ между колонками */
}

/* Заголовки */  
h1, .h1 {  
  font-size: var(--font-size-h1);  
  font-weight: 500;  
  line-height: 0.9;  
    
}  

h2, .h2 {  
  font-size: var(--font-size-h2);  
  font-weight: 600;  
  line-height: 1.3;  
   
}  

h3, .h3 {  
  font-size: var(--font-size-h3);  
  font-weight: 500;  
  line-height: 1.4;  
  
}  

p, .p {  
  font-size: var(--font-size-p);  
  line-height: 1.5;  
   
}  

.p-bold {  
  font-weight: 600;  
   line-height: 1.2; 
}  

.p-small {  
  font-size: var(--font-size-p-small);  
  opacity: 0.7;  
}  

.num {  
  /* Использование: цены, статистика, метрики */  
  font-size: var(--font-size-num);  
  font-weight: 600;  
  line-height: 1.2;  
  white-space: nowrap;  
}  


.img-pointer-none {
    width:100%;
    pointer-events: none; /* Отключает событие указателя для данного элемента */
    filter: blur(0);
    cursor: default;
}

/* Ссылки */  
a, .link {  
  color: var(--dark);  
  text-decoration: none;  
  transition: color 0.2s;  
}  

a:hover, .link:hover {  
  color: var(--color-beige);  
}  

/* Кнопки */  
.btn {  
  height: var(--h-interactive);  
  border-radius: calc(var(--h-interactive) / 2);  
  border: none;  
  font-family: var(--font-primary);  
  font-size: var(--font-size-p);  
  font-weight: 500;  
  text-transform: uppercase;  
  cursor: pointer;  
  transition: all 0.2s;  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
}  
 
.btn-primary {  
  background-color: var(--dark);  
  color: var(--color-white);  
}  

.btn-primary:hover {  
  background-color: var(--color-beige);  
  color: var(--dark);  
}  

.btn-secondary {  
  background-color: var(--color-white);  
  color: var(--dark);  
  border: 1px solid var(--border-light);  
}  

.btn-secondary:hover {  
  background-color: var(--color-beige);  
  border-color: var(--color-beige);  
}  

.btn-circle {  
  width: var(--h-interactive);  
  height: var(--h-interactive);  
  border-radius: 50%;  
  background-color: var(--color-light-gray);  
  padding: 0;  
}  

.btn-circle:hover {  
  background-color: var(--color-beige);  
} 

.btn-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  background-color: transparent;
  background-image: url('https://static.tildacdn.com/tild6132-3362-4366-b637-333439373935/arrow05.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}



.input:focus,  
input:focus {  
  outline: none;  
  border-color: var(--color-beige);  
}  

/* ===== Адаптивные стили по брейкпоинтам ===== */

/* Desktop Medium: 1440px - 1919px */
@media (max-width: 1919px) and (min-width: 1440px) {
   

    .two-columns {
        grid-template-columns: repeat(6, 1fr); /* Шесть колонок */
    }
}

/* Desktop Large: 1920px+ */
@media (min-width: 1920px) {
    

    .two-columns {
        grid-template-columns: repeat(12, 1fr); /* Двенадцать колонок */
    }
}

.bg-white { background-color: var(--color-white); }
.bg-gray { background-color: var(--color-light-gray); }
.bg-beige { background-color: var(--color-beige); }
.bg-black { 
    background-color: var(--dark); 
    color: var(--color-white);
}
.bg-gradient { 
    background: var(--gradient-beige-gray); 
}