[data-theme]{
	color: var(--color-contrast-high) !important;
}

@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
:root {
    --header-height: 120px;
}
.transform-upper{
    transition: 0.3s;
}
.transform-upper:hover{
    transform: scale(1.1);
}
.white-mask-top{
    position: absolute;
    top: -15px;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%) scale(-1);
    transform: translateX(-50%) scale(-1);    
}
.radio-switch__label{
    font-size: unset !important;
}
.white-mask{
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}
.upper-mask-robot{
    position: absolute;
    top: 5%;
    left: 60%;
    width: auto;
}
.upper-mask-cubes{
    position: absolute;
    bottom: 5%;
    top: auto;
    right: 70%;
    left: 5%;
    width: auto;
}
.gradient-classic{
    background: linear-gradient(#E4FE8C
, #bbf500);
}
.gradient-classic-deg{
    background: linear-gradient(45deg, #E4FE8C
, #bbf500);
}
.hero-starter::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../media/images/pattern-bg.webp);
    background-size: cover;
}
.section-numbers::before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../media/images/pattern-bg.webp);
    background-size: cover;
}
.p-table__item{
    background: white;
    box-shadow: var(--shadow-xl);
}
.p-table__price span {
    font-weight: 600 !important;
}
.p-table__title{
    font-weight: 600 !important;
}
.radio-switch__marker{
    width: 100% !important;
}
.individual-price{
    padding: var(--space-lg);
}
.individual-price::before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 0%;
    height: 0%;
    background: url(../media/images/pattern-bg.webp);
    background-size: cover;
}
.price-switcher-width{
    width: 200px;
}
.filter-marker-adaptive{
    height: 100%;
}
.filter-nav--expanded.filter-nav--v1 .filter-nav__btn[aria-current=true]{
    color: black;
}
.filter-nav-radius{
    border-radius: 30px;
    border: 2px solid var(--color-secondary); 
}
.btn:focus{
    box-shadow: none !important;
}
.card-portfolio-item:hover{

}
.card-v3__footer::before{
    background-color: var(--color-secondary);
}
.card-v3__footer span{
    color: var(--color-black);
}

.card-v3:hover .card-v3__footer .icon{
    color: var(--color-secondary);
}
@media(max-width: 1024px){
    .price-switcher-width{
        width: 140px;
    }
    .p-table__price span {
        font-size: var(--text-xl);
    }
    .individual-design{
        font-size: var(--text-xl) !important;
    }
    .filter-marker-adaptive{
        height: fit-content !important;
    }
}

/* Dark Theme Overrides - единый серый фон 14% */

/* Переопределение CSS переменных — чистый чёрный фон, светлые плашки */
[data-theme="dark"] {
    /* Фон — чистый чёрный #000 */
    --color-bg-darker: #000000;
    --color-bg-darker-h: 0;
    --color-bg-darker-s: 0%;
    --color-bg-darker-l: 0%;
    --color-bg-dark: #000000;
    --color-bg-dark-h: 0;
    --color-bg-dark-s: 0%;
    --color-bg-dark-l: 0%;
    --color-bg: #000000;
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 0%;
    /* Плашки — светлее 14% */
    --color-bg-light: hsl(232, 11%, 14%);
    --color-bg-light-h: 232;
    --color-bg-light-s: 11%;
    --color-bg-light-l: 14%;
    --color-bg-lighter: hsl(232, 11%, 18%);
    --color-bg-lighter-h: 232;
    --color-bg-lighter-s: 11%;
    --color-bg-lighter-l: 18%;
    --color-contrast-lower: hsl(232, 11%, 22%);
    --color-contrast-lower-h: 232;
    --color-contrast-lower-s: 11%;
    --color-contrast-lower-l: 22%;
}
[data-theme="dark"] .p-table__item {
    background: hsl(232, 11%, 14%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg,
[data-theme="dark"] .bg-dark {
    background-color: #000000 !important;
}

[data-theme="dark"] .notice__banner {
    background-color: hsl(232, 11%, 14%) !important;
    border: 1px solid hsl(74, 100%, 48%);
}

[data-theme="dark"] .filter-nav__btn[aria-current=true] {
    color: hsl(232, 11%, 14%) !important;
}

[data-theme="dark"] .section-numbers::before {
    opacity: 0.05;
}

[data-theme="dark"] .card-v12 {
    background-color: hsl(232, 11%, 14%);
}

[data-theme="dark"] .text-component,
[data-theme="dark"] .text-component p {
    color: hsl(240, 5%, 82%);
}

/* Hero текст на зелёном фоне — чёрный */
[data-theme="dark"] .gradient-classic .text-component p,
[data-theme="dark"] .gradient-classic-deg .text-component p {
    color: #000000;
}

/* ===========================================
   ТИПОГРАФИКА — правильная градация заголовков
   =========================================== */

/* h1 — главный заголовок (48-64px) */
h1 {
    font-size: var(--text-xxxxl, 3rem) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

@media (min-width: 64rem) {
    h1 {
        font-size: 4rem !important;
    }
}

/* h2 — заголовки секций (36-40px) */
h2 {
    font-size: var(--text-xxxl, 2.5rem) !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* h3 — подзаголовки (28-32px) */
h3 {
    font-size: var(--text-xxl, 2rem) !important;
    font-weight: 600;
    line-height: 1.3;
}

/* h4 — заголовки карточек (20-24px) */
h4 {
    font-size: var(--text-lg, 1.25rem) !important;
    font-weight: 600;
    line-height: 1.4;
}

/* Исключение: большие числа в статистике */
h4.text-xxxl {
    font-size: var(--text-xxxl, 2.5rem) !important;
    font-weight: 700;
}

[data-theme="dark"] .faq__item {
    background-color: hsl(232, 11%, 14%);
    border-color: hsl(232, 11%, 22%);
}

[data-theme="dark"] .card-v3 {
    background-color: hsl(232, 11%, 14%);
}

/* Маски — чистый чёрный */
[data-theme="dark"] .white-mask img,
[data-theme="dark"] .white-mask-top img,
[data-theme="dark"] .white-mask-top-dark img {
    filter: invert(1) brightness(0) !important;
}

/* Обрезка краёв масок — ровные 90° */
.white-mask,
.white-mask-top,
.white-mask-top-dark {
    overflow: hidden;
    width: 100%;
}

.white-mask img.mask,
.white-mask-top img.mask,
.white-mask-top-dark img.mask {
    width: 120%;
    max-width: none;
    margin-left: -10%;
}

[data-theme="dark"] .border {
    border-color: hsl(232, 11%, 22%) !important;
}

[data-theme="dark"] .border-2 {
    border-color: hsl(232, 11%, 26%) !important;
}

[data-theme="dark"] .inner-glow {
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.05);
}

[data-theme="dark"] .shadow-md {
    box-shadow: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.2),
                0 3px 5px hsla(0, 0%, 0%, 0.25),
                0 12px 20px hsla(0, 0%, 0%, 0.3);
}

[data-theme="dark"] .sticky-sharebar__btn .icon {
    color: var(--color-contrast-high) !important;
}

/* Секции — чёрный фон */
[data-theme="dark"] section:not([class*="gradient"]) {
    background-color: #000000 !important;
}

/* Карточки — светлые с серой обводкой */
[data-theme="dark"] .card,
[data-theme="dark"] .card-v3,
[data-theme="dark"] .card-v12,
[data-theme="dark"] .faq__item {
    background-color: hsl(232, 11%, 14%);
}

/* Плашки с иконками — серая обводка */
[data-theme="dark"] li.radius-lg.padding-md,
[data-theme="dark"] .feature-v3__item {
    border: 1px solid hsl(232, 11%, 22%);
}

/* Зелёные градиенты — оставляем оригинальные цвета */

/* Body — чистый чёрный */
[data-theme="dark"] body,
[data-theme="dark"] {
    background-color: #000000;
}

/* Footer — чистый чёрный */
[data-theme="dark"] footer {
    background-color: #000000;
}

/* Перезапись inline стилей — секции чёрные */
[data-theme="dark"] section[style*="background"] {
    background: #000000 !important;
}

/* Карточки и ссылки — светлые плашки */
[data-theme="dark"] .card-v3[style*="background"],
[data-theme="dark"] a[style*="background: #f3f4f9"],
[data-theme="dark"] a[style*="background:#f3f4f9"] {
    background: hsl(232, 11%, 14%) !important;
}

/* FAQ — уменьшенные заголовки вопросов */
.faq__item .text-md,
.faq__trigger .text-md {
    font-size: 0.75rem !important;
    font-weight: 500;
}

/* FAQ — уменьшенные заголовки разделов */
h2[id^="faq-"],
#faq h2.text-md {
    font-size: 0.75rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Тарифы — скрыть только названия (wrapper с margin-bottom-lg содержит названия) */
.p-table__price-wrapper.margin-bottom-lg {
    display: none !important;
}

/* Тарифы — текст описаний */
.p-table__features li {
    font-size: 1rem !important;
    line-height: 1.5;
}

/* Секционные заголовки — белые */
h2.text-xxl.font-normal {
    font-size: 1.75rem !important;
    color: #ffffff !important;
}

/* Тарифы — отступ после заголовка */
.p-table--has-switch .margin-bottom-xl {
    margin-bottom: var(--space-lg) !important;
}

/* Тарифы — заголовки карточек крупнее с отступом */
.p-table__item > .margin-bottom-xxs > p.text-center.font-semibold {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    color: #ffffff !important;
}

/* Скрыть соц. сети в hero и футере */
.sticky-sharebar,
.main-footer__social {
    display: none !important;
}

/* ===========================================
   АДАПТИВ — Мобильные устройства
   =========================================== */

/* Базовые улучшения для мобильных */
@media (max-width: 767px) {
    /* Hero секция */
    .hero-starter {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .hero-starter h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-starter h1 br {
        display: none;
    }
    
    .hero-starter .text-component p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Кнопки */
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Секционные заголовки */
    h2.text-xxl.font-normal {
        font-size: 1.25rem !important;
    }
    
    h2, h2.text-xxxl {
        font-size: 1.5rem !important;
    }
    
    /* Карточки преимуществ */
    #about li {
        padding: 1rem !important;
    }
    
    #about li h4 {
        font-size: 1rem !important;
    }
    
    #about li p {
        font-size: 0.85rem !important;
    }
    
    #about li figure img {
        width: 30% !important;
    }
    
    /* Тарифы */
    .p-table__item {
        margin-bottom: 1rem;
    }
    
    .p-table__features li {
        font-size: 0.85rem !important;
    }
    
    .p-table__item > .margin-bottom-xxs > p.text-center.font-semibold {
        font-size: 1.25rem !important;
    }
    
    /* FAQ */
    .faq__item {
        padding: 0.75rem !important;
    }
    
    .faq__item .text-md,
    .faq__trigger .text-md {
        font-size: 0.85rem !important;
    }
    
    /* Футер */
    .main-footer .grid {
        gap: 1rem !important;
    }
    
    .main-footer__link {
        font-size: 0.85rem !important;
    }
    
    /* Отступы секций */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .padding-y-xl {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Контейнер */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-starter h1 {
        font-size: 2.25rem !important;
    }
    
    h2.text-xxl.font-normal {
        font-size: 1.5rem !important;
    }
    
    .p-table__features li {
        font-size: 0.9rem !important;
    }
}

/* Cookie notice - убираем обводку, текст белым */
.cookie_notice .notice__banner {
    background: #000 !important;
    box-shadow: none !important;
    border: none !important;
}

.cookie_notice .notice__banner::before,
.cookie_notice .notice__banner::after {
    display: none !important;
}

.cookie_notice .notice__banner p,
.cookie_notice .notice__banner a {
    color: #fff !important;
}

.cookie_notice .notice__banner a {
    text-decoration: underline;
}

.cookie_notice .notice__banner svg,
.cookie_notice .notice__close-btn {
    color: #fff !important;
}

/* Улучшение скролла */
html {
    scroll-behavior: smooth;
}

/* Отключение анимаций при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}