/* ========================================
   CSS Variables & Reset
======================================== */
:root {
    /* Colors — из примера e2e4 (#5802a3) */
    --color-primary: #5802a3;
    --color-primary-hover: #4a028a;
    --color-secondary: #662793;
    --color-secondary-hover: #5802a3;
    --color-dark: #1a1a1a;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-white: #FFFFFF;
    --color-bg: #FFFFFF;
    --color-bg-light: #F5F5F5;
    --color-border: #E0E0E0;
    /* Текст как на внутренних страницах (раньше жёсткий #000) */
    --color-text-strong: #0a0a0a;
    /* Текст на фирменном фиолетовом фоне (кнопки, бейдж) */
    --color-on-primary: #ffffff;
    /* Подвал — отдельно от «белой поверхности», чтобы тёмная тема не ломала контраст */
    --color-footer-bg: #1a1a1a;
    
    /* Typography — Inter (latin + cyrillic в Google Fonts) */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.75rem;   /* 28px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 2.75rem;   /* 44px */
    
    /* Spacing */
    --spacing-xs: 0.2rem;       /* 3px */
    --spacing-sm: 0.4rem;       /* 6px */
    --spacing-md: 0.75rem;      /* 12px */
    --spacing-lg: 1rem;         /* 16px */
    --spacing-xl: 1.25rem;      /* 20px */
    --spacing-2xl: 1.5rem;      /* 24px */
    --spacing-3xl: 2rem;       /* 32px */
    
    /* Border Radius — без скруглений */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-full: 0;
    
    /* Shadows — легче */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.1);
    
    /* Transitions — короткие */
    --transition-fast: 100ms ease;
    --transition-base: 120ms ease;
    --transition-slow: 180ms ease;

    /* Всплывающие подсказки (оформление как на calculator-heating) */
    --tooltip-popover-bg: var(--color-dark);
    --tooltip-popover-color: #ffffff;
    --tooltip-popover-padding: 8px 10px;
    --tooltip-popover-font-size: 0.6875rem;
    --tooltip-popover-font-weight: 400;
    --tooltip-popover-line-height: 1.4;
    --tooltip-popover-radius: var(--radius-sm);
    --tooltip-popover-shadow: var(--shadow-md);
    --tooltip-popover-max-width: min(280px, 85vw);

    /* Внутренние страницы — сетка в духе e2e4 (контентная ширина + боковые поля) */
    --layout-page-max: 1488px;
    --layout-page-gutter: 16px;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 20px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   Layout
======================================== */
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Все страницы с main.page-content: уже́ контейнер и поля как у e2e4 (лендинг без page-content не затрагивается) */
body:has(main.page-content) .container {
    max-width: var(--layout-page-max);
    padding-left: var(--layout-page-gutter);
    padding-right: var(--layout-page-gutter);
}

/* ========================================
   Hero Banner (секция как в примере)
======================================== */
.hero-banner {
    background: linear-gradient(135deg, #d8c5ec 0%, #d0b8e8 50%, #c9ade0 100%);
    padding: var(--spacing-2xl) 0;
    position: relative;
    overflow: hidden;
}

.hero-banner__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-banner__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #4a028a;
    line-height: 1.15;
    margin: 0 0 var(--spacing-xl) 0;
    letter-spacing: -0.02em;
}

.hero-banner__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.hero-banner__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.hero-banner__pill:hover {
    background: var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Правая часть — декор (монитор, башня, иконка) */
.hero-banner__visual {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner__monitor {
    position: relative;
    z-index: 2;
    width: 200px;
    background: linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 100%);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hero-banner__screen {
    width: 100%;
    height: 120px;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.hero-banner__chart {
    height: 40px;
    background: linear-gradient(90deg, rgba(102, 39, 147, 0.6) 0%, rgba(88, 2, 163, 0.8) 100%);
    border-radius: 0;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 12px rgba(102, 39, 147, 0.4);
}

.hero-banner__line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(102, 39, 147, 0.8), transparent);
    border-radius: 0;
    width: 70%;
    margin: 0 auto;
}

.hero-banner__tower {
    position: absolute;
    right: 15%;
    bottom: 20%;
    width: 50px;
    height: 90px;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.hero-banner__tower::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 25px;
    background: repeating-linear-gradient(90deg, #252525 0px, #252525 2px, #1a1a1a 2px, #1a1a1a 5px);
    border-radius: 0;
}

.hero-banner__shield {
    position: absolute;
    top: 15%;
    right: 25%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 39, 147, 0.25);
    border-radius: 0;
    color: var(--color-primary);
    filter: drop-shadow(0 0 10px rgba(102, 39, 147, 0.5));
    z-index: 3;
}

.hero-banner__shield .iconify {
    font-size: 28px;
}

@media (max-width: 1024px) {
    .hero-banner__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-banner__pills {
        justify-content: center;
    }

    .hero-banner__visual {
        min-height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        padding: var(--spacing-xl) 0;
    }

    .hero-banner__title {
        margin-bottom: var(--spacing-md);
    }

    .hero-banner__pills {
        gap: var(--spacing-sm);
    }

    .hero-banner__pill {
        min-height: 44px;
        padding: 0.55rem 1rem;
        font-size: 0.875rem;
        line-height: 1.25;
    }

    .hero-banner__monitor {
        width: 160px;
    }

    .hero-banner__screen {
        height: 100px;
    }

    .hero-banner__tower {
        width: 40px;
        height: 70px;
        right: 10%;
    }

    .hero-banner__shield {
        width: 40px;
        height: 40px;
        right: 20%;
    }

    .hero-banner__shield .iconify {
        font-size: 22px;
    }
}

/* ========================================
   Header
======================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
}

body.nav-drawer-open .header {
    z-index: 90;
}

.header.header--scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Top Navigation */
.nav-top {
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-xs) 0;
}

.nav-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.nav-top__left {
    flex-shrink: 0;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 700;
    font-size: var(--font-size-2xl);
    color: var(--color-secondary);
}

.logo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-secondary);
    color: var(--color-on-primary);
    font-size: var(--font-size-sm);
    font-weight: 800;
    border-radius: var(--radius-sm);
}

.logo__text {
    letter-spacing: 1px;
}

/* Top Menu */
.nav-top__menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.nav-top__menu a {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

.nav-top__menu a:hover {
    color: var(--color-secondary);
}

/* Right Section */
.nav-top__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.search-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

.search-btn:hover {
    background-color: var(--color-bg-light);
}

.search-btn .iconify {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
}

/* Contacts */
.contacts {
    display: flex;
    gap: var(--spacing-xl);
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.contact-city {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.contact-phone {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
}

.contact-phone:hover {
    color: var(--color-secondary);
}

.contact-callback {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: 500;
}

.contact-callback:hover {
    text-decoration: underline;
}

/* Nav-top: три кнопки контактов в один ряд (Канал, Написать нам, Позвонить) */
.nav-top__contacts-row {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-sm);
}

.nav-top__contact-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-dark);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-top__contact-pill:hover,
.nav-top__contact-pill:focus-visible {
    background: linear-gradient(180deg, #6d1fc4 0%, var(--color-primary-hover) 55%, #3a0170 100%);
    color: var(--color-on-primary);
    border-color: var(--color-primary-hover);
}

/* Блок контактов на странице «Контакты» — те же кнопки в одном стиле */
.contact-page__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: stretch;
    margin: var(--spacing-2xl) 0;
}

.contact-page__row .nav-top__contact-pill {
    min-width: 10rem;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

/* Main Navigation */
.nav-main {
    background: var(--color-white);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.nav-main__inner {
    display: flex;
    justify-content: center;
}

.nav-main__menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

.nav-main__menu a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    padding: var(--spacing-sm) 0;
    position: relative;
}

.nav-main__menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width var(--transition-base);
}

.nav-main__menu a:hover::after {
    width: 100%;
}

.nav-main__menu a.nav-highlight {
    color: var(--color-secondary);
}

/*--- Dropdown Menu ---*/
.nav-main__item {
    position: relative;
}

.nav-main__item > a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-main__arrow {
    font-size: 14px;
    transition: transform var(--transition-fast);
}

.nav-main__item--dropdown:hover .nav-main__arrow {
    transform: rotate(180deg);
}

.nav-main__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 200;
    border: 1px solid var(--color-border);
}

.nav-main__dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-white);
}

.nav-main__item--dropdown:hover .nav-main__dropdown,
.nav-main__item--dropdown.nav-main__item--open .nav-main__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-main__item--dropdown.nav-main__item--open .nav-main__arrow {
    transform: rotate(180deg);
}

.nav-main__dropdown li {
    padding: 0;
}

.nav-main__dropdown a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.nav-main__dropdown a:hover {
    background: var(--color-bg-light);
    color: var(--color-secondary);
}

.nav-main__dropdown a::after {
    display: none;
}

/* ========================================
   Mobile navigation drawer (≤1024px)
======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-mobile-menu-btn {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: var(--spacing-sm);
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nav-mobile-menu-btn:hover,
.nav-mobile-menu-btn:focus-visible {
    background: var(--color-white);
    border-color: var(--color-primary);
    outline: none;
}

.nav-mobile-menu-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}

.nav-mobile-menu-btn__bars {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

.nav-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    pointer-events: none;
}

body.nav-drawer-open .nav-drawer-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    width: min(100vw - 40px, 380px);
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--color-white);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
    overflow: hidden;
}

body.nav-drawer-open .nav-drawer {
    transform: translateX(0);
    visibility: visible;
}

.nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-shrink: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.nav-drawer__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-dark);
}

.nav-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 var(--spacing-md);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-drawer__close:hover,
.nav-drawer__close:focus-visible {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    outline: none;
}

.nav-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-2xl);
    -webkit-overflow-scrolling: touch;
}

.nav-drawer__quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.nav-drawer__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-drawer__pill:hover,
.nav-drawer__pill:focus-visible {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    outline: none;
}

.nav-drawer__toplinks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 var(--spacing-lg) 0;
    padding: 0 0 var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

.nav-drawer__toplinks a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-drawer__toplinks a:hover,
.nav-drawer__toplinks a:focus-visible {
    background: var(--color-bg-light);
    color: var(--color-primary);
    outline: none;
}

.nav-drawer-acc {
    border-bottom: 1px solid var(--color-border);
}

.nav-drawer-acc__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: left;
    color: var(--color-dark);
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.nav-drawer-acc__trigger::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: var(--spacing-md);
    border-right: 2px solid var(--color-text-light);
    border-bottom: 2px solid var(--color-text-light);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.nav-drawer-acc__trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.nav-drawer-acc__trigger:hover,
.nav-drawer-acc__trigger:focus-visible {
    background: var(--color-bg-light);
    outline: none;
}

.nav-drawer-acc__panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 var(--spacing-md) var(--spacing-md);
}

.nav-drawer-acc__panel[hidden] {
    display: none;
}

.nav-drawer-acc__panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-drawer-acc__panel a:hover,
.nav-drawer-acc__panel a:focus-visible {
    background: var(--color-bg-light);
    color: var(--color-primary);
    outline: none;
}

.nav-drawer__highlight {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: var(--spacing-md);
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nav-drawer__highlight:hover,
.nav-drawer__highlight:focus-visible {
    background: rgba(88, 2, 163, 0.08);
    border-color: var(--color-primary);
    outline: none;
}

@media (max-width: 1024px) {
    .nav-mobile-menu-btn {
        display: inline-flex;
    }

    .nav-main {
        display: none;
    }

    /* Канал / Написать / Позвонить — в drawer; в шапке скрываем, иначе три min-width + лого + меню дают горизонтальный скролл */
    .header .nav-top__contacts-row {
        display: none;
    }

    .nav-top__inner {
        gap: var(--spacing-md);
        min-width: 0;
    }

    .nav-top__left {
        min-width: 0;
    }
}

@media (min-width: 1025px) {
    .nav-drawer,
    .nav-drawer-overlay {
        display: none !important;
    }
}

body.nav-drawer-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .nav-drawer,
    .nav-drawer-overlay {
        transition: none;
    }
}

/* ========================================
   Hero Section
======================================== */
.hero {
    position: relative;
    min-height: 380px;
    padding: var(--spacing-xl) 0;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero__pattern {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0.15;
}

.hero__pattern--left {
    left: 0;
    background: 
        linear-gradient(135deg, transparent 25%, var(--color-secondary) 25%, var(--color-secondary) 50%, transparent 50%),
        linear-gradient(45deg, transparent 25%, var(--color-secondary) 25%, var(--color-secondary) 50%, transparent 50%);
    background-size: 60px 60px;
    mask-image: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 60%);
}

.hero__pattern--right {
    right: 0;
    background: 
        linear-gradient(135deg, transparent 25%, var(--color-primary) 25%, var(--color-primary) 50%, transparent 50%),
        linear-gradient(45deg, transparent 25%, var(--color-primary) 25%, var(--color-primary) 50%, transparent 50%);
    background-size: 60px 60px;
    mask-image: linear-gradient(to left, rgba(0,0,0,0.4) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.4) 0%, transparent 70%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.hero__content {
    padding-right: var(--spacing-xl);
}

.hero__title {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-secondary);
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
}

.hero__subtitle {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 3px;
    margin-bottom: var(--spacing-xl);
}

.hero__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

/* Buttons — стиль как в примере e2e4 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-family);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    min-width: 140px;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: linear-gradient(180deg, #6d1fc4 0%, var(--color-primary-hover) 55%, #3a0170 100%);
    border-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.btn--outline {
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: linear-gradient(180deg, #ffffff 0%, #f3ecfa 100%);
}

/* Hero Dots */
.hero__dots {
    display: flex;
    gap: var(--spacing-sm);
}

.dot {
    width: 24px;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    cursor: pointer;
}

.dot--active {
    background: var(--color-secondary);
    width: 32px;
}

.dot:hover:not(.dot--active) {
    background: var(--color-text-light);
}

/* Hero Image */
.hero__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

.hero__device--tablet {
    position: relative;
    z-index: 2;
}

.tablet-frame {
    background: #1a1a1a;
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    transform: perspective(1000px) rotateY(-5deg);
}

.tablet-screen {
    width: 320px;
    height: 220px;
    background: linear-gradient(
        135deg,
        #4ade80 0%,
        #22c55e 20%,
        #facc15 40%,
        #f97316 60%,
        #ef4444 80%,
        #dc2626 100%
    );
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.heatmap-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.heatmap-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(74, 222, 128, 0.7) 0%,
        rgba(250, 204, 21, 0.7) 35%,
        rgba(249, 115, 22, 0.7) 65%,
        rgba(239, 68, 68, 0.7) 100%
    );
}

.hero__device--router {
    position: absolute;
    right: 0;
    bottom: 20%;
    z-index: 3;
}

.router {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.router__body {
    width: 120px;
    height: 90px;
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-lg);
}

.router__grille {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    bottom: 15px;
    background: repeating-linear-gradient(
        90deg,
        #2a2a2a 0px,
        #2a2a2a 3px,
        #1a1a1a 3px,
        #1a1a1a 6px
    );
    border-radius: var(--radius-sm);
}

.router__antenna {
    position: absolute;
    width: 8px;
    height: 50px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    border-radius: var(--radius-full);
    top: -40px;
}

.router__antenna--left {
    left: 20px;
    transform: rotate(-15deg);
}

.router__antenna--right {
    right: 20px;
    transform: rotate(15deg);
}

/* ========================================
   Categories Section
======================================== */
.categories {
    padding: var(--spacing-md) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.categories__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.category-card:hover {
    background: var(--color-bg-light);
    transform: translateY(-1px);
}

.category-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
    color: var(--color-secondary);
}

.category-card__icon .iconify {
    font-size: 48px;
}

.category-card:hover .category-card__icon {
    color: var(--color-primary);
}

.category-card__title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

/* ========================================
   Services Section
======================================== */

/*--- Services Container ---*/
.services {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
}

/*--- Services Grid ---*/
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

/*--- Service Card ---*/
.service-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all var(--transition-base);
    text-decoration: none;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

/*--- Card Preview (Illustration Area) ---*/
.service-card__preview {
    height: 140px;
    background: var(--color-bg-light);
    position: relative;
    overflow: hidden;
}

.service-card__illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--spacing-lg);
}

/*--- Equipment Illustration ---*/
.service-card__illustration--equipment {
    background: linear-gradient(135deg, #f0fdf9 0%, #e0f7f3 100%);
}

.illustration-asic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.asic-body {
    width: 140px;
    height: 60px;
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-sm);
    box-shadow: var(--shadow-md);
}

.asic-fans {
    display: flex;
    gap: 6px;
}

.asic-fan {
    width: 36px;
    height: 36px;
    background: #2a2a2a;
    border-radius: var(--radius-full);
    position: relative;
    border: 2px solid #444;
}

.asic-fan::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: repeating-conic-gradient(
        from 0deg,
        #555 0deg 30deg,
        #333 30deg 60deg
    );
    border-radius: var(--radius-full);
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .asic-fan::before { animation: none; }
}

.asic-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.asic-led {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.asic-led--green {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.asic-led--orange {
    background: var(--color-primary);
    box-shadow: 0 0 6px var(--color-primary);
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.asic-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-secondary);
    background: rgba(0, 166, 147, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.illustration-stats {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-secondary);
    background: var(--color-white);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.stat-badge--accent {
    color: var(--color-primary);
}

/*--- Heating Illustration ---*/
.service-card__illustration--heating {
    background: linear-gradient(135deg, #fef7ed 0%, #fdecd5 100%);
}

.illustration-house {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.house-roof {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 35px solid var(--color-primary);
    position: relative;
    z-index: 1;
}

.house-body {
    width: 80px;
    height: 55px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -2px;
}

.house-window {
    width: 18px;
    height: 18px;
    background: #fef3c7;
    border-radius: 0;
    border: 2px solid #d97706;
}

.house-door {
    width: 16px;
    height: 28px;
    background: #92400e;
    border-radius: 0;
    position: absolute;
    bottom: 0;
}

.heat-waves {
    position: absolute;
    bottom: -20px;
    display: flex;
    gap: 6px;
}

.heat-waves span {
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
    border-radius: var(--radius-full);
    animation: wave 2s ease-in-out infinite;
}

.heat-waves span:nth-child(2) {
    animation-delay: 0.2s;
    height: 25px;
}

.heat-waves span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes wave {
    0%, 100% { transform: scaleY(1); opacity: 0.6; }
    50% { transform: scaleY(1.3); opacity: 1; }
}

.illustration-temp {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.temp-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-white);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.temp-badge--btc {
    color: #f7931a;
    font-size: 14px;
}

/*--- Calculator Illustration ---*/
.service-card__illustration--calculator {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.illustration-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
    padding: 0 var(--spacing-md);
}

.chart-bar {
    width: 24px;
    background: var(--color-secondary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    opacity: 0.6;
    transition: all var(--transition-base);
}

.chart-bar--accent {
    background: var(--color-primary);
    opacity: 1;
}

.service-card:hover .chart-bar {
    opacity: 1;
}

.chart-line {
    width: 140px;
    height: 2px;
    background: var(--color-border);
}

.illustration-profit {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profit-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.profit-badge--green {
    color: #16a34a;
}

/*--- Card Content ---*/
.service-card__content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.service-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.service-card__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.service-card__icon .iconify {
    font-size: 20px;
}

.service-card:hover .service-card__icon {
    color: var(--color-secondary);
}

.service-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.service-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/*--- Service Card Animations ---*/
.service-card {
    animation: fadeInUp 0.2s ease-out both;
}

.service-card:nth-child(1) { animation-delay: 0.02s; }
.service-card:nth-child(2) { animation-delay: 0.05s; }
.service-card:nth-child(3) { animation-delay: 0.08s; }

/* ========================================
   Advantages Section
======================================== */

/*--- Section Title ---*/
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/*--- Advantages Container ---*/
.advantages {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-light);
}

/*--- Advantages Grid ---*/
.advantages__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

/*--- Advantage Card ---*/
.advantage-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    transition: height var(--transition-base);
}

.advantage-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.advantage-card:hover::before {
    height: 100%;
}

/*--- Large Cards (first 2) ---*/
.advantage-card--large {
    grid-column: span 1;
}

/*--- Card Header (Icon + Title) ---*/
.advantage-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/*--- Card Icon ---*/
.advantage-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    color: var(--color-secondary);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.advantage-card__icon .iconify {
    font-size: 20px;
}

.advantage-card:hover .advantage-card__icon {
    background: var(--color-secondary);
    color: var(--color-on-primary);
}

/*--- Card Title ---*/
.advantage-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.3;
    margin: 0;
}

/*--- Card Text ---*/
.advantage-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

/*--- Advantages Animations ---*/
.advantage-card {
    animation: fadeInUp 0.2s ease-out both;
}

.advantage-card:nth-child(1) { animation-delay: 0.02s; }
.advantage-card:nth-child(2) { animation-delay: 0.04s; }
.advantage-card:nth-child(3) { animation-delay: 0.06s; }
.advantage-card:nth-child(4) { animation-delay: 0.08s; }
.advantage-card:nth-child(5) { animation-delay: 0.1s; }
.advantage-card:nth-child(6) { animation-delay: 0.12s; }
.advantage-card:nth-child(7) { animation-delay: 0.14s; }
.advantage-card:nth-child(8) { animation-delay: 0.16s; }

/* ========================================
   Responsive Design
======================================== */
@media (min-width: 1400px) {
    /* Расширенная сетка только для главной; внутренние страницы остаются --layout-page-max */
    body:not(:has(main.page-content)) .container {
        max-width: 1800px;
        padding: 0 var(--spacing-lg);
    }
}

@media (max-width: 1024px) {
    .nav-top__menu {
        display: none;
    }
    
    .contacts {
        gap: var(--spacing-md);
    }
    
    .nav-main__menu {
        gap: var(--spacing-lg);
    }
    
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero__content {
        padding-right: 0;
    }
    
    .hero__actions {
        justify-content: center;
    }
    
    .hero__dots {
        justify-content: center;
    }
    
    .hero__image {
        display: none;
    }
    
    .categories__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services__grid .service-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
    
    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .footer__brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }
    
    .nav-top__right {
        gap: var(--spacing-sm);
    }
    
    .nav-top__contacts-row {
        gap: var(--spacing-xs);
    }
    
    .nav-top__contact-pill {
        min-width: 5.5rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .contacts {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .contact-item {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .contact-callback {
        display: none;
    }
    
    .nav-main__menu {
        gap: var(--spacing-md);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .services__grid .service-card:last-child {
        max-width: 100%;
    }
    
    .service-card__preview {
        height: 160px;
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .advantages__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .advantage-card {
        padding: var(--spacing-lg);
    }
    
    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: var(--spacing-2xl) 0;
    }
    
    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .footer__links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .logo__text {
        font-size: var(--font-size-lg);
    }
    
    .contacts {
        display: none;
    }
    
    .hero__title {
        font-size: var(--font-size-2xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
    }
    
    .btn {
        min-width: 140px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .categories__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }
    
    .category-card {
        padding: var(--spacing-md);
    }
    
    .category-card__icon {
        width: 48px;
        height: 48px;
    }
    
    .category-card__icon .iconify {
        font-size: 36px;
    }
}

/* ========================================
   Animations — короткие, без тяжёлых эффектов
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__title {
    animation: fadeInUp 0.25s ease-out;
}

.hero__subtitle {
    animation: fadeInUp 0.25s ease-out 0.03s both;
}

.hero__actions {
    animation: fadeInUp 0.25s ease-out 0.06s both;
}

.hero__dots {
    animation: fadeInUp 0.25s ease-out 0.09s both;
}

/* Плавное появление карточек — быстро */
.category-card {
    animation: fadeInUp 0.2s ease-out both;
}

.category-card:nth-child(1) { animation-delay: 0.02s; }
.category-card:nth-child(2) { animation-delay: 0.04s; }
.category-card:nth-child(3) { animation-delay: 0.06s; }
.category-card:nth-child(4) { animation-delay: 0.08s; }
.category-card:nth-child(5) { animation-delay: 0.1s; }
.category-card:nth-child(6) { animation-delay: 0.12s; }

/* Отключение анимаций для пользователей с 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;
    }
}


/* ========================================
   Footer Section
======================================== */

/*--- Footer Main Container ---*/
.footer {
    background: var(--color-footer-bg);
    color: #ffffff;
    margin-top: auto;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) 0;
}

/*--- Footer Brand ---*/
.footer__brand {
    max-width: 280px;
}

.logo--footer {
    margin-bottom: var(--spacing-md);
}

.logo--footer .logo__text {
    color: #ffffff;
}

.footer__description {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

/*--- Footer Navigation ---*/
.footer__nav {
    display: flex;
    flex-direction: column;
}

.footer__heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--spacing-lg);
}

.footer__menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer__menu a {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.footer__menu a:hover {
    color: var(--color-primary);
}

/*--- Footer Contacts ---*/
.footer__contacts {
    display: flex;
    flex-direction: column;
}

.footer__contact-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.footer__city {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
}

.footer__phone {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
}

.footer__phone:hover {
    color: var(--color-primary);
}

/*--- Footer Bottom Bar ---*/
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) 0;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer__copyright {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer__links {
    display: flex;
    gap: var(--spacing-lg);
}

.footer__links a {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer__links a:hover {
    color: var(--color-primary);
}

/* ========================================
   Crypto Ticker Section
======================================== */

/*--- Ticker Container ---*/
.crypto-ticker {
    background: var(--color-bg-light);
    padding: var(--spacing-sm) 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.crypto-ticker::before,
.crypto-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.crypto-ticker::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-light) 0%, transparent 100%);
}

.crypto-ticker::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-light) 0%, transparent 100%);
}

/*--- Ticker Track ---*/
.crypto-ticker__track {
    display: flex;
    overflow: hidden;
}

/*--- Ticker Content ---*/
.crypto-ticker__content {
    display: flex;
    gap: var(--spacing-2xl);
    animation: tickerScroll 80s linear infinite;
    white-space: nowrap;
}

.crypto-ticker__content:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .crypto-ticker__content {
        animation: none;
    }
}

/*--- Crypto Item ---*/
.crypto-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.crypto-item__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-on-primary);
}

.crypto-item__icon--btc { background: #f7931a; }
.crypto-item__icon--eth { background: #627eea; }
.crypto-item__icon--ltc { background: #bfbbbb; color: #345d9d; }
.crypto-item__icon--doge { background: #c2a633; }
.crypto-item__icon--zec { background: #ecb244; }
.crypto-item__icon--xmr { background: #ff6600; }
.crypto-item__icon--dash { background: #008ce7; }
.crypto-item__icon--kas { background: #49eacb; color: #111; }
.crypto-item__icon--etc { background: #328332; }

.crypto-item__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
}

.crypto-item__price {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
}

.crypto-item__change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.crypto-item__change--up {
    color: #22c55e;
}

.crypto-item__change--down {
    color: #ef4444;
}

.crypto-item__change .iconify {
    font-size: 14px;
}

/*--- Loading State ---*/
.crypto-ticker__loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
}

.crypto-ticker__loading .iconify {
    animation: spin 1s linear infinite;
}

/* ========================================
   Page Content (Inner Pages)
======================================== */

/*--- Page Layout ---*/
.page-content {
    padding: var(--spacing-sm) 0 var(--spacing-md);
    min-height: 60vh;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.08px;
}

/* ========================================
   Inner pages — единая типографика (есть main.page-content, лендинг без него)
======================================== */
body:has(main.page-content) main.page-content {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.08px;
    color: var(--color-text-strong);
    text-align: left;
    /* Единая база для заголовков и текста (как на service-center): не 1rem от html:20px */
    --page-content-body-size: 15px;
    --page-content-body-lh: 22px;
}

body:has(main.page-content) main.page-content .page-title,
body:has(main.page-content) main.page-content h1.page-title {
    font-size: calc(var(--page-content-body-size) + 2px);
    line-height: 1.35;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--color-text-strong);
    text-align: left;
}

body:has(main.page-content) main.page-content h2,
body:has(main.page-content) main.page-content .section-title,
body:has(main.page-content) main.page-content .legality-page__heading,
body:has(main.page-content) main.page-content .network-two-col__title,
body:has(main.page-content) main.page-content .catalog-card__title,
body:has(main.page-content) main.page-content .halving-section-title,
body:has(main.page-content) main.page-content .market-overview__title {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text-strong);
    text-align: left;
}

/* Текст в «карточках» абзацев: наследует размер/интерлиньяж от main, а не var(--font-size-base)=1rem */
body:has(main.page-content) main.page-content .heating-description,
body:has(main.page-content) main.page-content .heating-description p {
    font-size: inherit;
    line-height: inherit;
}

body:has(main.page-content) main.page-content .heating-intro__text {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .product-page-twocol__block h2 {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
}

body:has(main.page-content) main.page-content .product-page-twocol__block p,
body:has(main.page-content) main.page-content .product-page-twocol__block ul {
    font-size: inherit;
    line-height: inherit;
}

body:has(main.page-content) main.page-content .advantage-card__title {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
}

body:has(main.page-content) main.page-content .advantage-card__text {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-light);
}

body:has(main.page-content) main.page-content .catalog-card__text {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-light);
}

body:has(main.page-content) main.page-content .faq-question h4 {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
}

body:has(main.page-content) main.page-content .faq-answer p {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-light);
}

body:has(main.page-content) main.page-content .halving-card__header .halving-card__heading {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
}

body:has(main.page-content) main.page-content .boiler-comparison-table {
    font-size: inherit;
}

body:has(main.page-content) main.page-content h3 {
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    color: var(--color-text-strong);
    text-align: left;
}

body:has(main.page-content) .breadcrumbs,
body:has(main.page-content) .breadcrumbs a,
body:has(main.page-content) .breadcrumbs span:not(.iconify),
body:has(main.page-content) .breadcrumbs .iconify {
    color: var(--color-text-strong);
    font-size: 13px;
    line-height: 17px;
}

body:has(main.page-content) .breadcrumbs a:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

body:has(main.page-content) .page-description {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.08px;
    color: var(--color-text-strong);
    text-align: left;
}

@media (max-width: 768px) {
    body:has(main.page-content) main.page-content {
        font-size: 17px;
        line-height: 26px;
        --page-content-body-size: 17px;
        --page-content-body-lh: 26px;
    }

    body:has(main.page-content) main.page-content .page-description {
        font-size: 16px;
        line-height: 24px;
    }

    body:has(main.page-content) .breadcrumbs,
    body:has(main.page-content) .breadcrumbs a,
    body:has(main.page-content) .breadcrumbs span:not(.iconify),
    body:has(main.page-content) .breadcrumbs .iconify {
        font-size: 14px;
        line-height: 18px;
    }
}

@media (any-pointer: coarse) {
    .nav-top__contact-pill {
        min-height: 44px;
    }
}

body:has(main.page-content) .page-toc__label,
body:has(main.page-content) .page-toc a {
    color: var(--color-text-strong);
}

body:has(main.page-content) .page-toc a:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

body:has(main.page-content) main.page-content .page-toc {
    font-size: inherit;
    line-height: inherit;
}

body:has(main.page-content) main.page-content .service-doc__toc-nav a {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .service-doc__toc-nav a:hover {
    color: var(--color-text-strong);
    border-bottom-color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .service-doc__toc-label {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content p a:not(.btn),
body:has(main.page-content) main.page-content .legality-page__prose a,
body:has(main.page-content) main.page-content .heating-description a,
body:has(main.page-content) main.page-content .service-section__body a,
body:has(main.page-content) main.page-content td a:not(.btn),
body:has(main.page-content) main.page-content .service-doc__main .service-doc__article a:not(.btn):not(.catalog-card) {
    color: var(--color-text-strong);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

body:has(main.page-content) main.page-content .legality-page__prose a:hover,
body:has(main.page-content) main.page-content p a:not(.btn):hover {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.legality-page .legality-page__prose p,
body:has(main.page-content) main.legality-page .legality-page__prose li {
    text-align: left;
    font-size: inherit;
    line-height: inherit;
}

body:has(main.page-content) .heating-section--with-toc .section-title--center {
    text-align: left;
}

body:has(main.page-content) .tool-last-updated {
    color: var(--color-text-strong);
    text-align: left;
    justify-content: flex-start;
}

body:has(main.page-content) .tool-last-updated .iconify {
    color: var(--color-text-strong);
}

body:has(main.page-content) .tool-last-updated strong {
    color: var(--color-text-strong);
}

body:has(main.page-content) .footer__heading {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

body:has(main.page-content) main.page-content.tool-page .calculator__results-title,
body:has(main.page-content) main.page-content.tool-page .calc-field__label,
body:has(main.page-content) main.page-content.tool-page .retarget-info {
    font-size: var(--page-content-body-size);
    line-height: var(--page-content-body-lh);
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content.tool-page .retarget-countdown .section-title {
    font-size: calc(var(--page-content-body-size) + 1px);
    line-height: 1.35;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

body:has(main.page-content) main.page-content .network-two-col__intro {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .info-card__label,
body:has(main.page-content) main.page-content .halving-stat__label {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .market-stat__label,
body:has(main.page-content) main.page-content .market-stat__description,
body:has(main.page-content) main.page-content .market-stat__footnote,
body:has(main.page-content) main.page-content .loading-text {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .market-overview__title .iconify,
body:has(main.page-content) main.page-content .market-stat__icon {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .halving-card__heading {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .catalog-card__text,
body:has(main.page-content) main.page-content .catalog-card__arrow {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .catalog-card:hover .catalog-card__arrow {
    color: var(--color-text-strong);
}

body:has(main.page-content) main.page-content .halving-section-title .iconify {
    color: var(--color-text-strong);
}

/*--- Breadcrumbs ---*/
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02px;
}

.breadcrumbs a {
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--color-secondary);
}

.breadcrumbs span:not(.iconify) {
    color: var(--color-dark);
    font-weight: 500;
}

.breadcrumbs .iconify {
    font-size: 12px;
    color: var(--color-text-light);
}

/*--- Page Header ---*/
.page-header {
    margin-bottom: var(--spacing-md);
}

.page-title {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}

.page-description {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.05px;
    color: var(--color-text-light);
}

/* Каталоги: меньше «воздуха» под шапкой страницы */
.page-content.catalog-page .page-header {
    margin-bottom: var(--spacing-md);
}

/* Инструменты и плотные страницы (калькуляторы, халвинг, сложность, курсы) */
main.page-content.tool-page .page-header {
    margin-bottom: var(--spacing-sm);
}

main.page-content.tool-page .halving-page {
    gap: var(--spacing-sm);
}

main.page-content.tool-page .halving-countdown {
    padding: var(--spacing-md);
}

main.page-content.tool-page .countdown-timer {
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
}

main.page-content.tool-page .countdown-item {
    padding: var(--spacing-sm);
}

main.page-content.tool-page .countdown-item--main {
    padding: var(--spacing-md);
}

main.page-content.tool-page .network-two-col .halving-countdown {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}

main.page-content.tool-page .network-two-col .countdown-header {
    margin-bottom: var(--spacing-sm);
}

main.page-content.tool-page .network-two-col .countdown-timer {
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-xs);
}

main.page-content.tool-page .network-two-col .countdown-item {
    min-width: 52px;
    padding: var(--spacing-xs);
}

main.page-content.tool-page .network-two-col .countdown-item--main {
    min-width: 68px;
    padding: var(--spacing-sm);
}

main.page-content.tool-page .network-two-col .countdown-item--main .countdown-value {
    font-size: 1.5rem;
}

main.page-content.tool-page .network-two-col .countdown-value {
    font-size: 1.125rem;
}

main.page-content.tool-page .network-two-col .next-halving {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

main.page-content.tool-page .network-two-col .halving-card--completed {
    padding: var(--spacing-sm);
}

main.page-content.tool-page .network-two-col .halving-dates {
    padding: var(--spacing-sm);
}

main.page-content.tool-page .network-two-col .difficulty-main-stats {
    grid-template-columns: 1fr 1fr;
}

main.page-content.tool-page .difficulty-main-stats {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

main.page-content.tool-page .difficulty-stat-compact {
    padding: var(--spacing-sm) var(--spacing-md);
}

main.page-content.tool-page .retarget-info {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

main.page-content.tool-page .calculator__form {
    padding: var(--spacing-sm) var(--spacing-md);
}

main.page-content.tool-page .calculator__inputs {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

main.page-content.tool-page .calculator__results {
    padding: var(--spacing-sm) var(--spacing-md);
}

main.page-content.tool-page .calculator__results-title {
    margin-bottom: var(--spacing-sm);
}

main.page-content.tool-page .calculator__results-title .iconify {
    font-size: 18px;
}

main.page-content.tool-page .results-table__row {
    padding: 6px var(--spacing-sm);
    gap: var(--spacing-sm);
}

main.page-content.tool-page .results-table__cell {
    font-size: inherit;
    line-height: inherit;
}

main.page-content.tool-page .calc-field__label {
    font-size: inherit;
    line-height: inherit;
}

main.page-content.tool-page .calc-input,
main.page-content.tool-page .calc-select {
    font-size: inherit;
    line-height: inherit;
    padding: 0.35rem 0.5rem;
}

main.page-content.tool-page .calc-select {
    padding-right: 1.75rem;
}

main.page-content.tool-page .calculator--electricity .calculator__split-panel--inputs .calculator__form,
main.page-content.tool-page .calculator--electricity .calculator__split-panel--results .calculator__results {
    padding: 6px 10px;
}

main.page-content.tool-page .calculator--electricity .calculator__inputs {
    margin-bottom: 4px;
    gap: 4px;
}

main.page-content.tool-page .calculator--electricity .results-table__header,
main.page-content.tool-page .calculator--electricity .results-table__row {
    gap: 4px 6px;
    padding: 4px 8px;
}

main.page-content.tool-page .calculator--electricity .results-table__cell {
    font-size: inherit;
    line-height: inherit;
}

main.page-content.tool-page .calculator--electricity .results-table__header .results-table__cell {
    font-size: 12px;
    line-height: 1.25;
}

main.page-content.tool-page .rates-layout {
    gap: var(--spacing-md);
}

/* Верхняя строка: хлебные крошки слева, оглавление справа */
.page-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.page-top-bar .breadcrumbs {
    margin-bottom: 0;
}
.page-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
}
.page-toc__label {
    color: var(--color-text-light);
    font-weight: 500;
    margin-right: var(--spacing-xs);
}
.page-toc a {
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}
.page-toc a:hover {
    color: var(--color-secondary);
}
/* Оглавление в столбик (страница отопления) */
.page-toc--column {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
}
.page-toc--column .page-toc__label {
    margin-right: 0;
    margin-bottom: var(--spacing-xs);
}

/* Страница отопления: оглавление только в блоке «Экономика», слева от текста */
.heating-section--with-toc .section-title--center {
    text-align: center;
}
.heating-section__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: start;
}
.heating-section__row .heating-page__toc {
    flex: 0 0 25%;
    max-width: 25%;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.heating-section__row .heating-page__toc .page-toc--column {
    align-items: flex-start;
}
.heating-section__row .heating-description {
    flex: 1;
    min-width: 0;
}

/* При переходе по якорю — заголовок раздела остаётся видимым */
.heating-page [id] {
    scroll-margin-top: 5rem;
}

@media (max-width: 768px) {
    .page-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-toc--column {
        align-items: flex-start;
    }
    .heating-section__row {
        flex-direction: column;
    }
    .heating-section__row .heating-page__toc {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ========================================
   Legality page (legality-mining.html)
======================================== */
main.legality-page.heating-page > .container > .legality-page__prose:first-of-type,
main.legality-page.heating-page > .container > .heating-description.legality-page__prose:first-of-type {
    padding-top: var(--spacing-xs);
}

main.legality-page .legality-page__prose p,
main.legality-page .legality-page__prose li {
    text-align: left;
}

main.legality-page .legality-page__prose ul {
    margin: 0 0 var(--spacing-sm);
    padding-left: 1.25em;
}

main.legality-page .legality-page__prose p {
    margin: 0 0 var(--spacing-sm);
}

/* ========================================
   Service Pages — компактный layout по образцу криптокотлов/курсов
======================================== */
.service-page {
    padding: var(--spacing-sm) 0 var(--spacing-md);
}
.service-page .page-header {
    margin-bottom: var(--spacing-md);
}
.service-page .section-title {
    margin-bottom: var(--spacing-sm);
    text-align: left;
    justify-content: flex-start;
}
.service-page .advantages,
.service-page .service-section {
    padding: var(--spacing-sm) 0;
}
.service-page .heating-description,
.service-page .service-section__body {
    padding: var(--spacing-sm) 0;
    /* наследуют размер текста от .page-content / main.page-content */
}
.service-page .heating-description p,
.service-page .service-section__body p {
    margin-bottom: var(--spacing-sm);
}
.service-page .heating-description p:last-child,
.service-page .service-section__body p:last-child {
    margin-bottom: 0;
}
.service-page .advantages__grid {
    gap: var(--spacing-sm);
}
.service-page .advantage-card {
    padding: var(--spacing-sm) var(--spacing-md);
}
.service-page .advantage-card__header {
    margin-bottom: var(--spacing-xs);
}
.service-page .heating-faq .faq-item {
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
}
.service-page .heating-faq .faq-question {
    margin-bottom: var(--spacing-xs);
}
.service-page .heating-note {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}
.service-page .heating-cta-block {
    padding: var(--spacing-md) 0;
}
.service-page .heating-intro {
    padding: var(--spacing-sm) 0 var(--spacing-md);
}
.service-page .heating-intro__inner {
    gap: var(--spacing-md);
}
.service-page .img-placeholder--scheme {
    min-height: 180px;
    padding: var(--spacing-md);
}
.service-facts {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.service-facts__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}
.service-facts__body p {
    margin-bottom: var(--spacing-sm);
}
.service-facts__body p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Catalog / List Pages (оборудование, услуги, онлайн сервисы)
======================================== */
.catalog-page .page-header {
    margin-bottom: var(--spacing-xl);
}

.catalog-section {
    margin-bottom: var(--spacing-2xl);
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-list__item--wide .catalog-card {
    padding: var(--spacing-lg) var(--spacing-xl);
}

.network-page-section {
    margin-top: var(--spacing-2xl);
}

/* Сеть BTC/LTC: блоки друг под другом — сначала сложность, затем халвинг */
.network-two-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: stretch;
    margin-top: var(--spacing-md);
}

.network-two-col__col {
    min-width: 0;
    width: 100%;
}

.network-two-col__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-sm);
}

.network-two-col__title .iconify {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.network-two-col__intro {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md);
}

.halving-section-title--sub {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
}

/* Онлайн-сервисы: «Последнее обновление» над футером */
.tool-last-updated {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.tool-last-updated .iconify {
    font-size: 18px;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.tool-last-updated strong {
    color: var(--color-text);
    font-weight: 600;
}

.catalog-page .tool-last-updated {
    margin-top: var(--spacing-lg);
}

/* Связанные материалы и «следующий шаг» (хабы, калькуляторы) */
.page-related,
.page-next-step {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    text-align: left;
}

.page-related__title,
.page-next-step__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
}

body:has(main.page-content) .page-related__title,
body:has(main.page-content) .page-next-step__title {
    color: var(--color-text-strong);
}

.page-related__list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-text);
}

body:has(main.page-content) .page-related__list {
    color: var(--color-text-strong);
}

.page-related__list li {
    margin-bottom: var(--spacing-xs);
}

.page-next-step__text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--color-text);
}

body:has(main.page-content) .page-next-step__text {
    color: var(--color-text-strong);
}

.page-next-step__tg {
    display: inline;
    vertical-align: baseline;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.page-next-step__tg .page-next-step__tg-icon {
    display: inline-block;
    font-size: 1.08em;
    line-height: 1;
    vertical-align: text-bottom;
    margin-right: 0.28em;
}

body:has(main.page-content) .page-next-step__tg {
    color: var(--color-text-strong);
}

body:has(main.page-content) .page-next-step__tg:hover {
    color: var(--color-primary);
}

.rates-status--page-end {
    margin-top: var(--spacing-xl);
}

/* Документальный макет страниц «Услуги» (оглавление + статья) */
.service-doc {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    margin-top: var(--spacing-lg);
}

.service-doc__toc {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--spacing-md));
    padding: var(--spacing-md) 0;
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.service-doc__toc-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md);
}

.service-doc__toc-label {
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.service-doc__toc-nav a {
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
}

.service-doc__toc-nav a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.service-doc__main {
    min-width: 0;
}

.service-doc__h1 {
    margin-bottom: var(--spacing-lg);
}

.service-doc__article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.service-doc__section .section-title {
    margin-bottom: var(--spacing-md);
}

.service-doc__section .heating-description,
.service-doc__section > p,
.service-doc__section > ul {
    margin-top: 0;
}

.service-doc__lead {
    margin-bottom: 0;
}

.heating-cta-block--in-article {
    margin-top: var(--spacing-md);
}

@media (max-width: 900px) {
    .service-doc {
        grid-template-columns: 1fr;
    }

    .service-doc__toc {
        position: static;
        order: -1;
    }
}

.catalog-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.catalog-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.catalog-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 24px;
}

.catalog-card:hover .catalog-card__icon {
    background: rgba(88, 2, 163, 0.1);
}

.catalog-card__content {
    flex: 1;
    min-width: 0;
}

.catalog-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-xs) 0;
}

.catalog-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
}

.catalog-card__arrow {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-light);
    transition: transform var(--transition-fast);
}

.catalog-card:hover .catalog-card__arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .catalog-card {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .catalog-card__icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .catalog-card__title {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   Product cards (equipment pages)
======================================== */
.product-cards-section {
    margin-bottom: var(--spacing-2xl);
}

.product-cards-section .section-title {
    margin-bottom: var(--spacing-lg);
}

.product-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.product-cards-grid li {
    display: flex;
}

.product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.product-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.25;
}

.product-card__specs {
    list-style: none;
    margin: 0 0 0.25rem 0;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    flex: 1;
}

.product-card__specs li {
    padding: 0.125rem 0;
    border-bottom: 1px solid var(--color-bg-light);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.product-card__specs li:last-child {
    border-bottom: none;
}

.product-card__price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.125rem 0;
}

.product-card__price-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0 0 0.25rem 0;
}

.product-card__benefit {
    font-size: var(--font-size-xs);
    color: var(--color-text);
    margin: 0 0 0.25rem 0;
}

.product-card__benefit-amount {
    color: #2d7a4a;
    font-weight: 600;
}

.product-card__action {
    margin-top: auto;
}

.product-card__action .btn--block {
    width: 100%;
    justify-content: center;
}

.product-card__action .btn {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .product-cards-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        padding: 0.5rem 0.75rem;
    }
}

/* Two-column block after product cards (Для чего? | Технические особенности) */
.product-page-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.product-page-twocol__block {
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.product-page-twocol__block h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-md) 0;
}

.product-page-twocol__block p,
.product-page-twocol__block ul {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.55;
    margin: 0 0 var(--spacing-sm) 0;
}

.product-page-twocol__block p:last-child,
.product-page-twocol__block ul:last-child {
    margin-bottom: 0;
}

.product-page-twocol__block a {
    color: var(--color-primary);
    font-weight: 500;
}

.product-page-twocol__block a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .product-page-twocol {
        grid-template-columns: 1fr;
    }
}

/* Таблица моделей шумобоксов (soundproof-boxes.html) */
.soundproof-models-wrap {
    margin-top: var(--spacing-md);
}

.soundproof-models-table {
    font-size: 12px;
}

.soundproof-models-table .asic-table__th,
.soundproof-models-table .asic-table__cell {
    padding: var(--spacing-xs) var(--spacing-sm);
    white-space: normal;
}

.soundproof-models-table .asic-table__th--action,
.soundproof-models-table .asic-table__cell--action {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.soundproof-models-table .asic-table__name {
    font-weight: 600;
}

.soundproof-models-table__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.2;
}

.soundproof-models-footnote {
    margin-top: var(--spacing-md);
}

.soundproof-models-footnote p:last-child {
    margin-bottom: 0;
}

/* Boiler comparison table (crypto vs electric) */
.boiler-comparison-section {
    margin-bottom: var(--spacing-2xl);
}
.advantages .boiler-comparison-section {
    margin-top: var(--spacing-lg);
}
.advantages .boiler-comparison-section:first-of-type {
    margin-top: var(--spacing-xl);
}

.boiler-comparison-section .section-title {
    margin-bottom: var(--spacing-md);
}

.boiler-comparison-wrapper {
    overflow-x: auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.boiler-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.boiler-comparison-table th,
.boiler-comparison-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.boiler-comparison-table th {
    font-weight: 600;
    background: var(--color-bg-light);
    color: var(--color-dark);
}

.boiler-comparison-table td:first-child {
    font-weight: 500;
    color: var(--color-text);
}

.boiler-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.boiler-comparison-table tbody tr:hover {
    background: var(--color-bg-light);
}

.boiler-comparison-table .amount-expense {
    color: #b53d3d;
}

.boiler-comparison-table .amount-income {
    color: #2d7a4a;
    font-weight: 600;
}

.boiler-comparison-updated {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.4;
}

.boiler-comparison-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

.boiler-comparison-diff {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.boiler-comparison-disclaimer {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
    font-style: italic;
}

/* ========================================
   ASIC price table
======================================== */
.asic-price-wrapper {
    overflow-x: auto;
    margin-bottom: var(--spacing-2xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

/* Скрытые блоки загрузки/ошибки не должны оставлять отступов в потоке */
.asic-price-wrapper .calculator__form[hidden],
.asic-price-wrapper .calculator__form--error[hidden],
.asic-price-wrapper #asicsCatalogWrap[hidden],
.asic-price-wrapper #asicsEmptyMessage[hidden],
.heating-calculator-wrapper #heatingCalc[hidden],
.heating-calculator-wrapper #profitabilityCalc[hidden] {
    display: none !important;
}

.asic-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.asic-price-table th,
.asic-price-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.asic-price-table th {
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    white-space: nowrap;
}

.asic-price-table td {
    color: var(--color-text);
}

.asic-price-table tbody tr:hover {
    background: var(--color-bg-light);
}

.asic-price-table tbody tr:last-child td {
    border-bottom: none;
}

.asic-price-table .asic-price-table__price {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .asic-price-table th,
    .asic-price-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   ASIC cards (catalog from asics.json)
======================================== */
.asic-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.asic-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.asic-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.asic-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.3;
}

.asic-card__spec {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.asic-card__spec:last-of-type {
    margin-bottom: var(--spacing-sm);
}

.asic-card__price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

@media (max-width: 768px) {
    .asic-cards {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ASIC catalog: фильтры слева, таблица справа
======================================== */
.asic-catalog {
    font-size: var(--font-size-xs);
    line-height: 1.45;
    margin: 0;
    padding: 0;
}

.asic-catalog .calc-field__label {
    font-size: inherit;
}

.asic-catalog .calc-select {
    font-size: inherit;
}

/* Панель сортировки: компактный шрифт и тот же размер в списке option */
.asic-catalog .asic-toolbar--bar {
    --asic-sort-font-size: 0.75rem;
    font-size: var(--asic-sort-font-size);
    line-height: 1.35;
}

.asic-catalog .asic-toolbar--bar .calc-field__label {
    font-size: var(--asic-sort-font-size);
}

.asic-catalog .asic-toolbar--bar .calc-select {
    font-size: var(--asic-sort-font-size);
    padding: 0.35rem 1.75rem 0.35rem 0.5rem;
    line-height: 1.35;
    min-height: auto;
}

.asic-catalog .asic-toolbar--bar .calc-select option {
    font-size: var(--asic-sort-font-size);
    font-family: var(--font-family);
    padding: 0.2em 0.4em;
}

/* Одна строка грида: левая колонка и правая колонка начинаются с одной горизонтали.
   Справа — flex-колонка (сортировка + таблица), без multiline grid у фильтров. */
.asic-catalog__layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    column-gap: var(--spacing-lg);
    align-items: stretch;
}

.asic-catalog__layout > .asic-filters {
    grid-column: 1;
    margin: 0;
}

.asic-catalog__layout > .asic-catalog__content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
    margin: 0;
}

.asic-catalog__content > .asic-catalog__toolbar {
    width: 100%;
}

.asic-filters {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: sticky;
    top: var(--spacing-md);
}

.asic-filters__block + .asic-filters__block {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.asic-filters__checks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

/* ~10 строк чекбоксов алгоритмов с вертикальной прокруткой */
.asic-filters__algo-scroll {
    margin-top: var(--spacing-xs);
    max-height: calc(10 * (1.35em + var(--spacing-xs)));
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.asic-filters__algo-scroll .asic-filters__checks--scroll {
    margin-top: 0;
}

.profitability-calculator__algo-scroll {
    max-height: calc(5 * (1.35em + var(--spacing-xs)));
}

.asic-filters__check-label {
    align-items: flex-start;
}

.asic-filters__hint {
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

.asic-filters__hint a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.asic-filters__hint a:hover {
    text-decoration: none;
}

.asic-toolbar--bar {
    margin-bottom: var(--spacing-md);
}

.asic-catalog .asic-toolbar__row--bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.asic-catalog .asic-toolbar__group--sort {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.asic-catalog .asic-toolbar__sort-label {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.asic-catalog .asic-toolbar__row--bar .asic-toolbar__select {
    min-width: 11rem;
    max-width: min(22rem, 55vw);
    flex: 0 1 auto;
}

.asic-catalog .asic-toolbar__row--bar .asic-toolbar__checkbox {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .asic-catalog__layout {
        grid-template-columns: 1fr;
    }

    .asic-catalog__layout > .asic-filters,
    .asic-catalog__layout > .asic-catalog__content {
        grid-column: 1;
    }

    .asic-filters {
        position: static;
    }
}

/* ========================================
   ASIC table (WhatToMine-style compact list)
======================================== */
.asic-toolbar {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* В каталоге отступ между сортировкой и таблицей задаёт row-gap сетки */
.asic-catalog .asic-catalog__toolbar.asic-toolbar {
    margin-bottom: 0;
}

.asic-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-lg);
}

.asic-toolbar__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.asic-toolbar__select {
    min-width: 160px;
}

.asic-toolbar__select[multiple] {
    min-height: 72px;
    max-height: 120px;
}

.asic-catalog .asic-toolbar__checkbox {
    font-size: inherit;
}

.asic-toolbar__checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.asic-toolbar__checkbox input {
    width: 1rem;
    height: 1rem;
}

.crypto-boilers-catalog-section {
    margin-bottom: var(--spacing-3xl);
}

.crypto-boilers-catalog-section .crypto-boilers-table.asic-table,
.crypto-boilers-catalog-section .asic-table {
    font-size: 12px;
}

.crypto-boilers-catalog-section .asic-table__th,
.crypto-boilers-catalog-section .asic-table__cell {
    padding: 4px 6px;
}

/* Таблица криптокотлов: одна строка на позицию, узкая кнопка */
.crypto-boilers-catalog-section .crypto-boilers-table thead th,
.crypto-boilers-catalog-section .crypto-boilers-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
}

.crypto-boilers-catalog-section .crypto-boilers-table .asic-table__name {
    display: inline;
    font-weight: 600;
}

.crypto-boilers-catalog-section .asic-table__th--action,
.crypto-boilers-catalog-section .asic-table__cell--action {
    width: 1%;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    text-align: center;
}

.crypto-boilers-catalog-section .btn--order-compact {
    min-width: 0;
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.asic-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.asic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.asic-catalog .asic-table {
    font-size: 12px;
}

.asic-catalog .asic-table__th,
.asic-catalog .asic-table__cell {
    padding: 4px 6px;
}

.asic-table__th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--color-dark);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.asic-table__th--num,
.asic-table__cell--num {
    text-align: right;
}

.asic-table__th--algo,
.asic-table__cell--algo {
    text-align: left;
    white-space: nowrap;
}

.asic-table__th--price {
    text-align: right;
}

.asic-table__row {
    transition: background-color var(--transition-fast);
}

.asic-table__row:hover {
    background-color: var(--color-bg-light);
}

.asic-table__cell {
    padding: var(--spacing-xs) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.asic-table__cell--model {
    min-width: 180px;
}

.asic-table__name {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
}

.asic-table__meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: 2px;
}

.asic-catalog .asic-table__meta {
    font-size: 0.6875rem;
}

.asic-table__cell--price {
    text-align: right;
    font-weight: 500;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .asic-toolbar__row {
        flex-direction: column;
        align-items: stretch;
    }

    .asic-toolbar__row--bar {
        align-items: stretch;
    }

    .asic-catalog .asic-toolbar__row--bar {
        flex-direction: row;
        align-items: center;
    }

    .asic-catalog .asic-toolbar__row--bar .asic-toolbar__select {
        min-width: 10rem;
        max-width: min(20rem, 70vw);
    }

    .asic-toolbar__select,
    .asic-toolbar__select[multiple] {
        min-width: 100%;
    }

    .asic-table {
        font-size: var(--font-size-xs);
    }

    .asic-catalog .asic-table {
        font-size: 12px;
    }

    .asic-table__cell {
        padding: 3px 4px;
    }

    .asic-catalog .asic-table__th,
    .asic-catalog .asic-table__cell {
        padding: 3px 4px;
    }

    .asic-table__th--algo,
    .asic-table__cell--algo {
        white-space: normal;
    }
}

/* ========================================
   Calculator Styles
======================================== */

/*--- Calculator Container ---*/
.calculator {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* Ввод слева, расчёты справа (доходность, электроэнергия, отопление) */
.calculator--split .calculator__split {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.25fr);
    align-items: stretch;
    min-height: 0;
}

.calculator--split .calculator__split-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.calculator--split .calculator__split-panel--inputs .calculator__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
}

.calculator--split .calculator__inputs {
    grid-template-columns: 1fr;
    flex: 1;
}

.calculator--split .calculator__actions {
    margin-top: auto;
}

.calculator--split .calculator__split-panel--results {
    background: var(--color-white);
}

.calculator--split .calculator__split-panel--results .calculator__results {
    flex: 1;
}

@media (max-width: 900px) {
    .calculator--split .calculator__split {
        grid-template-columns: 1fr;
    }

    .calculator--split .calculator__split-panel--inputs .calculator__form {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
}

/* Калькулятор электроэнергии: две симметричные карточки по центру; блок ввода без изменения внутреннего вида */
.calculator--electricity {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    display: flex;
    justify-content: center;
}

.calculator--electricity.calculator--split .calculator__split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--spacing-md);
    align-items: stretch;
    width: min(100%, 700px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.calculator--electricity.calculator--split .calculator__split-panel--inputs,
.calculator--electricity.calculator--split .calculator__split-panel--results {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.calculator--electricity.calculator--split .calculator__split-panel--inputs .calculator__form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    box-sizing: border-box;
}

.calculator--electricity .calc-field {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    gap: 0.15rem;
}

.calculator--electricity .calc-field__row {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.calculator--electricity .calc-field__row > .calc-input {
    flex: 1 1 6rem;
    min-width: 0;
}

.calculator--electricity .calc-field__row > .calc-input--small {
    flex: 0 1 3.25rem;
    min-width: 2.75rem;
}

.calculator--electricity .calc-field__row > .calc-select {
    flex: 1 1 5rem;
    min-width: 0;
}

.calculator--electricity .calc-field__row > .calc-field__suffix {
    flex: 0 0 auto;
}

.calculator--electricity.calculator--split .calculator__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--spacing-xs);
}

.calculator--electricity.calculator--split .calculator__actions .btn {
    width: 100%;
    justify-content: center;
}

.calculator--electricity.calculator--split .calculator__split-panel--results .calculator__results {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-light);
    box-sizing: border-box;
}

.calculator--electricity.calculator--split .calculator__inputs {
    margin-bottom: var(--spacing-xs);
    gap: var(--spacing-xs);
}

.calculator--electricity .calculator__results-title {
    margin: 0 0 var(--spacing-xs) 0;
    justify-content: flex-start;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
}

.calculator--electricity .results-table {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.calculator--electricity .results-table__header {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
}

.calculator--electricity .results-table__row {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
}

.calculator--electricity .results-table__row:last-child {
    margin-bottom: 0;
}

.calculator--electricity .results-table__row:hover {
    background: var(--color-white);
}

.calculator--electricity .results-table__header,
.calculator--electricity .results-table__row {
    grid-template-columns: auto minmax(0, 8.625rem) minmax(0, 7.5rem);
    gap: 4px 8px;
    padding: 4px 8px;
}

.calculator--electricity .results-table__header .results-table__cell:nth-child(1),
.calculator--electricity .results-table__row .results-table__cell:nth-child(1) {
    justify-self: start;
    text-align: left;
}

.calculator--electricity .results-table__header .results-table__cell:nth-child(2),
.calculator--electricity .results-table__header .results-table__cell:nth-child(3),
.calculator--electricity .results-table__row .results-table__cell:nth-child(2),
.calculator--electricity .results-table__row .results-table__cell:nth-child(3) {
    text-align: right;
    justify-self: end;
}

.calculator--electricity .results-table__header .results-table__cell {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.calculator--electricity .results-table__row .results-table__cell {
    font-size: 13px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.calculator--electricity .results-table__period {
    gap: 4px;
}

.calculator--electricity .results-table__period .period-value {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .calculator--electricity.calculator--split .calculator__split {
        grid-template-columns: 1fr 1.15fr;
        width: min(100%, 700px);
        max-width: 100%;
    }

    .calculator--electricity.calculator--split .calculator__split-panel--inputs .calculator__form {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 720px) {
    .calculator--electricity.calculator--split .calculator__split {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 320px;
    }
}

/* Калькулятор отопления: сетка как каталог асиков (фильтры слева), типографика asic-catalog */
.heating-page__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.heating-page__title-icon {
    font-size: 1.75rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.heating-page__note {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    max-width: 48rem;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-light);
}

.heating-page__note p {
    margin: 0 0 var(--spacing-sm);
}

.heating-page__note p:last-child {
    margin-bottom: 0;
}

.heating-page__note strong {
    color: var(--color-text);
    font-weight: 600;
}

.heating-calculator {
    margin: 0;
    padding: 0;
}

.heating-calculator__form {
    margin: 0;
}

.heating-calculator .asic-filters__input-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.heating-calculator .asic-catalog .asic-filters .asic-filters__input.calc-input {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    line-height: 1.35;
    padding: 0.35rem 0.5rem;
    min-height: auto;
    border-radius: var(--radius-sm);
}

.heating-calculator .asic-filters__suffix {
    font-size: inherit;
    color: var(--color-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.heating-calculator__form-error {
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #b32626;
    font-weight: 500;
}

.heating-calculator__tariff-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.heating-calculator__checkbox-tight {
    margin: 0;
}

.heating-help-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    cursor: help;
    line-height: 1;
    flex-shrink: 0;
}

.heating-help-btn:hover,
.heating-help-btn:focus-visible {
    color: var(--color-primary);
}

.heating-help-btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 0;
}

.heating-help-btn .iconify {
    font-size: 1.05rem;
    display: block;
}

.heating-help-btn__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--tooltip-popover-max-width);
    padding: var(--tooltip-popover-padding);
    background: var(--tooltip-popover-bg);
    color: var(--tooltip-popover-color);
    font-family: var(--font-family);
    font-size: var(--tooltip-popover-font-size);
    font-weight: var(--tooltip-popover-font-weight);
    line-height: var(--tooltip-popover-line-height);
    text-align: left;
    border-radius: var(--tooltip-popover-radius);
    box-shadow: var(--tooltip-popover-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    transition: opacity 0.12s ease;
}

.heating-help-btn:hover .heating-help-btn__tip,
.heating-help-btn:focus-visible .heating-help-btn__tip {
    opacity: 1;
    visibility: visible;
}

.heating-help-btn--in-table .heating-help-btn__tip {
    left: auto;
    right: 0;
    bottom: auto;
    top: calc(100% + 6px);
    transform: none;
}

.heating-calculator__th-roi,
.heating-calculator__cell-roi {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.heating-calculator__roi-text {
    text-align: right;
}

.heating-help-btn--in-table .iconify {
    font-size: 0.875rem;
}

.heating-calculator__submit {
    width: 100%;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

.heating-calculator__table-panel {
    margin-top: 0;
}

.heating-calculator .heating-results-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.heating-calculator .results-table--heating-wide {
    min-width: 38rem;
    margin-bottom: 0;
}

.heating-calculator .results-table--heating-wide .results-table__header,
.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__row {
    display: grid;
    grid-template-columns: minmax(9rem, 1.5fr) 3.25rem 3.5rem minmax(4.25rem, 1fr) minmax(4.25rem, 1fr) minmax(6.5rem, 1.35fr);
    gap: 6px 10px;
    padding: 6px var(--spacing-sm);
    align-items: center;
}

.heating-calculator .results-table--heating-wide .results-table__header {
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 0;
}

.heating-calculator .results-table--heating-wide .results-table__header .results-table__cell {
    font-size: 0.6875rem;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--color-text-light);
}

.heating-calculator .results-table--heating-wide .results-table__header .results-table__cell:nth-child(n + 3) {
    text-align: right;
    justify-self: end;
}

.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__row {
    border-bottom: 1px solid var(--color-border);
}

.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__row:last-child {
    border-bottom: none;
}

.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__cell {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.heating-calculator .results-table--heating-wide .results-table__cell--model {
    word-break: break-word;
    hyphens: auto;
}

.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__cell:nth-child(n + 3) {
    text-align: right;
    justify-self: end;
}

.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__cell:nth-child(1),
.heating-calculator .results-table--heating-wide #heatingTableBody .results-table__cell:nth-child(2) {
    text-align: left;
    justify-self: start;
}

.heating-calculator .results-table__row--heating-empty .results-table__cell--span-all {
    grid-column: 1 / -1;
    text-align: left;
    justify-self: stretch;
    color: var(--color-text-light);
    font-size: 0.8125rem;
}

.heating-calculator .results-table__price {
    color: var(--color-dark);
    font-weight: 600;
}

/*--- Profitability calculator (таблица сравнения) ---*/
/* Левая колонка ~на 35% шире базовой minmax(220px, 260px) */
.profitability-calculator .asic-catalog__layout {
    grid-template-columns: minmax(297px, 351px) minmax(0, 1fr);
}

@media (max-width: 900px) {
    .profitability-calculator .asic-catalog__layout {
        grid-template-columns: 1fr;
    }
}

.profitability-calculator__filters-block .asic-filters__checks {
    margin-top: var(--spacing-xs);
}

.profitability-calculator__cooling-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
}

.profitability-calculator__model-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: var(--spacing-xs);
    max-height: min(22rem, 50vh);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
}

.profitability-calculator__model-empty {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    color: var(--color-text-light);
    text-align: left;
}

.profitability-calculator__model-item {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.125rem 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
    word-break: break-word;
}

.profitability-calculator__model-item:hover,
.profitability-calculator__model-item:focus-visible {
    background: var(--color-bg-light);
}

.profitability-calculator__model-item.is-selected {
    background: rgba(37, 99, 235, 0.12);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.profitability-calculator__model-item:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 0;
}

.profitability-calculator .asic-toolbar__row--bar.profitability-calculator__toolbar-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
}

.profitability-calculator .asic-toolbar__row--bar .profitability-calculator__sort-select {
    min-width: 7.25rem;
    max-width: min(13.5rem, 36vw);
}

.profitability-calculator__sort-group {
    flex-shrink: 0;
}

.profitability-calculator__hide-outdated-label {
    margin: 0;
}

.profitability-calculator__toolbar-currency {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
}

.profitability-calculator__currency-segment {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-white);
    flex-shrink: 0;
}

.profitability-calculator__currency-option {
    position: relative;
    margin: 0;
    display: flex;
}

.profitability-calculator__currency-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.profitability-calculator__currency-face {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    background: var(--color-bg-light);
    color: var(--color-text);
    border: none;
    border-right: 1px solid var(--color-border);
    transition: background 0.12s ease, color 0.12s ease;
}

.profitability-calculator__currency-option:last-child .profitability-calculator__currency-face {
    border-right: none;
}

.profitability-calculator__currency-option input:checked + .profitability-calculator__currency-face {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.profitability-calculator__currency-option input:focus-visible + .profitability-calculator__currency-face {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
    z-index: 1;
}

.profitability-calculator__currency-option:hover .profitability-calculator__currency-face {
    background: var(--color-border);
}

.profitability-calculator__currency-option input:checked + .profitability-calculator__currency-face:hover {
    background: var(--color-primary);
    filter: brightness(1.05);
}

.profitability-calculator__toolbar-tariff {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex-shrink: 1;
    min-width: 0;
}

.profitability-calculator__toolbar-tariff .profitability-calculator__tariff-label {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.profitability-calculator__tariff-row {
    margin-top: 0;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.profitability-calculator__tariff-row .asic-filters__input {
    width: auto;
    min-width: 3.25rem;
    max-width: 5rem;
    flex: 1 1 auto;
}

.profitability-calculator .profitability-calculator__toolbar-row .profitability-calculator__catalog-updated {
    margin-left: auto;
    flex-shrink: 0;
}

.profitability-calculator__catalog-updated {
    font-size: 0.6875rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-text-light);
    white-space: nowrap;
}

/* Одна сетка на все строки: шапка и строки с subgrid — ширины колонок совпадают */
.profitability-calculator .results-table--profitability-wide {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, max-content));
    grid-auto-flow: row;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    box-sizing: border-box;
}

.profitability-calculator .results-table--profitability-wide #profitTableBody {
    display: contents;
}

.profitability-calculator .results-table--profitability-wide .results-table__header,
.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 0;
    padding: 0;
    margin: 0;
    align-items: stretch;
    min-width: 0;
}

.profitability-calculator .results-table--profitability-wide .results-table__header > .results-table__cell,
.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__row > .results-table__cell {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.4rem 0.45rem;
    box-sizing: border-box;
    min-width: 0;
}

.profitability-calculator .results-table--profitability-wide .results-table__header > .results-table__cell:last-child,
.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__row > .results-table__cell:last-child {
    border-right: none;
}

.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__row:last-child > .results-table__cell {
    border-bottom: none;
}

.profitability-calculator .results-table--profitability-wide .results-table__header .results-table__cell {
    font-size: 12px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-bg-light);
}

.profitability-calculator .results-table--profitability-wide .results-table__header .results-table__cell:nth-child(n + 5):not(.profitability-calculator__th-remove) {
    text-align: right;
    white-space: nowrap;
}

.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__cell {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__cell:nth-child(n + 5):not(.profitability-calculator__cell-remove) {
    text-align: right;
    white-space: nowrap;
}

.profitability-calculator .results-table--profitability-wide #profitTableBody .results-table__cell:nth-child(-n + 4) {
    text-align: left;
}

.profitability-calculator .results-table--profitability-wide .results-table__header .results-table__cell:nth-child(-n + 4) {
    text-align: left;
}

.profitability-calculator__qty-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    white-space: nowrap;
}

.profitability-calculator__qty-value {
    min-width: 1.35rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.profitability-calculator__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    color: var(--color-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.profitability-calculator__qty-btn:hover,
.profitability-calculator__qty-btn:focus-visible {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.profitability-calculator__qty-btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 1px;
}

.profitability-calculator__th-remove,
.profitability-calculator__cell-remove {
    text-align: center;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.profitability-calculator__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.profitability-calculator__remove-btn:hover,
.profitability-calculator__remove-btn:focus-visible {
    color: #b32626;
}

.profitability-calculator__remove-btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.profitability-calculator__remove-btn .iconify {
    font-size: 1.25rem;
    display: block;
}

.profitability-calculator__neg-hint {
    display: inline;
    margin-left: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-light);
    white-space: normal;
}

/*--- Calculator Form ---*/
.calculator__form {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.calculator__inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/*--- Calculator Field ---*/
.calc-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.calc-field__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.calc-field__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calc-field__suffix {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    white-space: nowrap;
}

/*--- Calculator Inputs — формы как в примере ---*/
.calc-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
    min-width: 0;
}

.calc-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.calc-input--small {
    flex: 0 0 70px;
    text-align: center;
}

.calc-input::placeholder {
    color: var(--color-text-light);
}

/*--- Calculator Selects ---*/
.calc-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.calc-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

@media (any-pointer: coarse) {
    .calc-input,
    .asic-filters__input.calc-input,
    .calc-select {
        min-height: 44px;
        font-size: 16px;
    }

    .calc-input--small {
        min-height: 44px;
        flex: 0 0 4.5rem;
    }
}

.table-scroll-hint {
    display: none;
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .table-scroll-hint {
        display: block;
    }
}

.calc-select--small {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 32px;
}

.calc-select[multiple] {
    min-height: 120px;
    max-height: 280px;
    padding-right: 0.75rem;
    background-image: none;
}

/*--- Calculator Actions ---*/
.calculator__actions {
    display: flex;
    gap: var(--spacing-md);
}

.calculator__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calculator__actions .btn .iconify {
    font-size: 18px;
}

/*--- Calculator Results ---*/
.calculator__results {
    padding: var(--spacing-md);
}

.calculator__results.animate .results-table__row {
    animation: fadeInUp 0.15s ease-out both;
}

.calculator__results.animate .results-table__row:nth-child(2) { animation-delay: 0.02s; }
.calculator__results.animate .results-table__row:nth-child(3) { animation-delay: 0.04s; }
.calculator__results.animate .results-table__row:nth-child(4) { animation-delay: 0.06s; }
.calculator__results.animate .results-table__row:nth-child(5) { animation-delay: 0.08s; }

.calculator__results-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.calculator__results-title .iconify {
    font-size: 20px;
    color: var(--color-secondary);
}

/*--- Results Table ---*/
.results-table {
    margin-bottom: var(--spacing-md);
}

.results-table__header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.results-table__header .results-table__cell {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-table__row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.results-table__row:hover {
    background: var(--color-bg-light);
}

.results-table__row--highlight {
    background: linear-gradient(135deg, rgba(0, 166, 147, 0.05) 0%, rgba(244, 121, 32, 0.05) 100%);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.results-table__row--highlight:hover {
    background: linear-gradient(135deg, rgba(0, 166, 147, 0.1) 0%, rgba(244, 121, 32, 0.1) 100%);
}

.results-table__cell {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.results-table__period {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.period-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-secondary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.period-label {
    font-weight: 500;
    color: var(--color-dark);
}

.results-table__row .results-table__cell--label {
    font-weight: 500;
    color: var(--color-text-light);
}
#profitabilityResults .results-table__row {
    grid-template-columns: 1fr 2fr;
}
.calculator__form--error {
    padding: var(--spacing-md);
    color: var(--color-text-light);
}
.calculator__form--error .btn { margin-top: var(--spacing-sm); }
.calculator__results-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

.results-table__price {
    font-weight: 600;
    color: var(--color-primary);
}

/*--- Info Cards ---*/
.calculator__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.info-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.info-card > .iconify {
    font-size: 24px;
    color: var(--color-secondary);
}

.info-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-card__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.info-card__value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
}

/*--- Calculator Responsive ---*/
@media (max-width: 1024px) {
    .calculator__inputs {
        grid-template-columns: 1fr 1fr;
    }
    
    .calculator__info {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .calculator__inputs {
        grid-template-columns: 1fr;
    }
    
    .calculator__info {
        grid-template-columns: 1fr;
    }
    
    .calc-field__row {
        flex-wrap: wrap;
    }
    
    .calc-input--small {
        flex: 0 0 60px;
    }
    
    .results-table__header,
    .results-table__row {
        grid-template-columns: 0.8fr 1fr 1fr;
        padding: var(--spacing-md);
    }

    .calculator--electricity .results-table__header,
    .calculator--electricity .results-table__row {
        grid-template-columns: auto minmax(0, 8.05rem) minmax(0, 6.9rem);
        gap: 4px 6px;
        padding: 4px 8px;
    }
    
}

@media (max-width: 480px) {
    .calculator__form {
        padding: var(--spacing-md);
    }
    
    .calculator__results {
        padding: var(--spacing-md);
    }
    
    .calculator__actions {
        flex-direction: column;
    }
    
    .calculator__actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .results-table__header,
    .results-table__row {
        grid-template-columns: 1fr 1fr;
    }
    
    .results-table__header .results-table__cell:first-child,
    .results-table__period {
        display: none;
    }

    .calculator--electricity .results-table__header,
    .calculator--electricity .results-table__row {
        grid-template-columns: auto minmax(0, 6.325rem) minmax(0, 5.75rem);
        padding: 4px 6px;
    }

    .calculator--electricity .results-table__header .results-table__cell:first-child,
    .calculator--electricity .results-table__period {
        display: flex;
    }
}

/* ========================================
   Halving Page Styles
======================================== */

/*--- Halving Page Container ---*/
.halving-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/*--- Countdown Section ---*/
.halving-countdown {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    color: #ffffff;
}

.countdown-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.countdown-label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-width: 70px;
}

.countdown-item--main {
    background: linear-gradient(135deg, #f7931a 0%, #ff6b00 100%);
    min-width: 100px;
    padding: var(--spacing-lg);
}

.countdown-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1;
}

.countdown-item--main .countdown-value {
    font-size: var(--font-size-4xl);
}

.countdown-unit {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--spacing-xs);
}

/*--- Progress Bar ---*/
.halving-progress {
    margin-bottom: var(--spacing-md);
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-xs);
}

.progress-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f7931a 0%, #22c55e 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--spacing-xs);
}

/*--- Next Halving Section ---*/
.next-halving {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.next-halving__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.next-halving__label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-xs);
}

.next-halving__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #f7931a;
}

.next-halving__time {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
}

.next-halving__reward {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-change {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.reward-box {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

.reward-box--old {
    background: rgba(255, 255, 255, 0.1);
}

.reward-box--new {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.reward-amount {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.reward-label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
}

.reward-arrow {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

/*--- Halving Card ---*/
.halving-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
}

.halving-card--completed {
    border-left: 4px solid #22c55e;
}

.halving-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.halving-card__header .halving-card__heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.halving-card__header .iconify {
    font-size: 20px;
}

.halving-card__content {
    display: flex;
    gap: var(--spacing-lg);
}

.halving-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.halving-stat__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.halving-stat__value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
}

/*--- Halving Section Title ---*/
.halving-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.halving-section-title .iconify {
    font-size: 22px;
    color: var(--color-secondary);
}

/*--- Halving Dates Table ---*/
.halving-dates {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
}

.halving-table-wrapper {
    overflow-x: auto;
}

.halving-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.halving-table th,
.halving-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.halving-table th {
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    background: var(--color-bg-light);
}

.halving-table td {
    color: var(--color-text);
}

.halving-table td:first-child {
    font-weight: 600;
    color: var(--color-secondary);
}

.halving-row--genesis {
    background: var(--color-bg-light);
}

.halving-row--next {
    background: linear-gradient(90deg, rgba(247, 147, 26, 0.1) 0%, rgba(247, 147, 26, 0.05) 100%);
    font-weight: 600;
}

.halving-row--next td {
    color: #f7931a;
}

.halving-row--future {
    color: var(--color-text-light) !important;
}

.halving-row--future td {
    color: var(--color-text-light);
}

.halving-row--last {
    border-top: 2px dashed var(--color-border);
}

/*--- Halving Info Section ---*/
.halving-info {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.info-item {
    text-align: center;
}

.info-item__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin: 0 auto var(--spacing-sm);
    color: var(--color-secondary);
}

.info-item__icon .iconify {
    font-size: 24px;
}

.info-item h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-xs) 0;
}

.info-item p {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

/*--- LTC Specific Styles ---*/
.halving-countdown--ltc {
    background: linear-gradient(135deg, #1a2a4a 0%, #0f1a2e 100%);
}

.countdown-item--ltc {
    background: linear-gradient(135deg, #345d9d 0%, #4a7fc7 100%);
}

.progress-fill--ltc {
    background: linear-gradient(90deg, #345d9d 0%, #4a7fc7 100%);
}

.next-halving__value--ltc {
    color: #345d9d;
}

.halving-row--ltc td {
    color: #345d9d;
}

.info-item__icon--ltc {
    color: #345d9d;
}

/*--- Comparison Table ---*/
.comparison-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--spacing-md);
}

.comparison-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    background: var(--color-white);
}

.comparison-row--header {
    background: var(--color-bg-light);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--color-text-light);
}

.comparison-row span {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.comparison-row span:not(:first-child) {
    text-align: center;
}

/*--- Halving Responsive ---*/
@media (max-width: 768px) {
    .countdown-timer {
        flex-wrap: wrap;
    }
    
    .countdown-item--main {
        flex-basis: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .next-halving {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .halving-card__content {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-row {
        grid-template-columns: 1fr;
    }
    
    .comparison-row span {
        text-align: left !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    .comparison-row span:first-child {
        background: var(--color-bg-light);
        font-weight: 600;
    }
}

/* ========================================
   Crypto Rates Page Styles
======================================== */

/*--- Crypto Rates Container ---*/
.crypto-rates {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/*--- Rates Layout (Market Overview + Table) ---*/
.rates-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/*--- Status Bar ---*/
.rates-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.rates-status__info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.rates-status__info .iconify {
    font-size: 18px;
    color: var(--color-secondary);
}

.rates-status__auto {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.rates-status__auto .status-dot {
    font-size: 10px;
    color: #22c55e;
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .rates-status__auto .status-dot { animation: none; }
}

/*--- Market Overview Section ---*/
.market-overview {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    position: sticky;
    top: 80px;
}

.market-overview__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
}

.market-overview__title .iconify {
    font-size: 24px;
    color: var(--color-secondary);
}

.market-overview__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.market-stat {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.market-stat__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.market-stat__icon {
    font-size: 20px;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.market-stat__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
}

.market-stat__value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.market-stat__description {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
    font-weight: 500;
}

.market-stat__footnote {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.45;
    font-weight: 400;
}

.loading-text {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: var(--font-size-sm);
}

.error-text {
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

/*--- Fear & Greed Index Styles ---*/
.fear-greed-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1;
}

.fear-greed-label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-light);
    margin-left: var(--spacing-xs);
}

.fear-greed-value--extreme-fear {
    color: #dc2626;
}

.fear-greed-value--fear {
    color: #f97316;
}

.fear-greed-value--neutral {
    color: #6b7280;
}

.fear-greed-value--greed {
    color: #22c55e;
}

.fear-greed-value--extreme-greed {
    color: #16a34a;
}

/*--- Rates Table Container ---*/
.rates-table-container {
    flex: 1;
}

/*--- Rates Table Wrapper ---*/
.rates-table-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/*--- Rates Table ---*/
.rates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.rates-table th,
.rates-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.rates-table th {
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    white-space: nowrap;
}

.rates-table__coin {
    min-width: 180px;
}

.rates-table__price {
    min-width: 120px;
}

.rates-table__cap {
    min-width: 100px;
}

.rates-table__change {
    min-width: 90px;
    text-align: right !important;
}

/*--- Table Row ---*/
.rates-table__row {
    transition: background-color var(--transition-fast);
    animation: fadeInUp 0.15s ease-out both;
}

.rates-table__row:hover {
    background: var(--color-bg-light);
}

.rates-table__row:last-child td {
    border-bottom: none;
}

/*--- Rank Cell ---*/
.rates-table__row td:first-child {
    font-weight: 700;
    color: var(--color-text-light);
    text-align: center;
}

/*--- Coin Info ---*/
.coin-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.coin-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-on-primary);
    flex-shrink: 0;
}

.coin-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coin-name {
    font-weight: 600;
    color: var(--color-dark);
}

.coin-symbol {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/*--- Price Cell ---*/
.price-value {
    font-weight: 600;
    color: var(--color-dark);
}

/*--- Change Values ---*/
.change-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.change-value .iconify {
    font-size: 12px;
}

.change-value--up {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}

.change-value--down {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.change-value--neutral {
    color: var(--color-text-light);
    background: var(--color-bg-light);
}

/*--- Loading State ---*/
.rates-table__loading td {
    padding: var(--spacing-2xl);
    text-align: center;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.loading-spinner .iconify {
    font-size: 24px;
    color: var(--color-secondary);
    animation: spin 1s linear infinite;
}

/*--- Info Cards ---*/
.rates-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.rates-info__card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.rates-info__card > .iconify {
    font-size: 24px;
    color: var(--color-secondary);
}

.rates-info__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rates-info__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.rates-info__value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
}

/*--- Legend ---*/
.rates-legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
}

.rates-legend h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.rates-legend__items {
    display: flex;
    gap: var(--spacing-lg);
}

.rates-legend__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.legend-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

.legend-indicator--up {
    background: rgba(22, 163, 74, 0.2);
    border: 2px solid #16a34a;
}

.legend-indicator--down {
    background: rgba(220, 38, 38, 0.2);
    border: 2px solid #dc2626;
}

.legend-indicator--neutral {
    background: var(--color-bg-light);
    border: 2px solid var(--color-text-light);
}

/*--- Crypto Rates Responsive ---*/
@media (max-width: 1200px) {
    .rates-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--spacing-md);
    }
    
    .market-overview {
        padding: var(--spacing-md);
    }
    
    .rates-table-wrapper {
        overflow-x: auto;
    }
    
    .rates-table {
        min-width: 900px;
    }
}

@media (max-width: 1024px) {
    .rates-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .market-overview {
        position: static;
    }
    
    .market-overview__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .rates-status {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .market-overview__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .market-overview__title {
        font-size: var(--font-size-base);
    }
    
    .market-stat__value {
        font-size: var(--font-size-lg);
    }
    
    .fear-greed-value {
        font-size: var(--font-size-xl);
    }
    
    .rates-info {
        grid-template-columns: 1fr;
    }
    
    .rates-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .rates-legend__items {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .rates-table th,
    .rates-table td {
        padding: var(--spacing-sm);
    }
    
    .coin-icon {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }
    
    .coin-name {
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   Heating Mining Page Styles
======================================== */

/*--- Heating Page Container ---*/
.heating-page {
    padding-bottom: 0;
}

/* Отступ сверху для хлебных крошек */
.heating-page__breadcrumbs-wrap {
    padding-top: var(--spacing-sm);
}

/* Уменьшенные отступы — размер заголовков задаётся body:has(main.page-content) … */
.heating-page .section-title {
    margin-bottom: var(--spacing-sm);
}
.heating-page .advantages {
    padding: var(--spacing-md) 0;
    background: transparent;
}
.heating-page .heating-description {
    background: transparent;
    border-left: none;
    padding: var(--spacing-md) 0;
}
.heating-page .advantages__grid {
    gap: var(--spacing-md);
}
.heating-page .advantage-card {
    padding: var(--spacing-md);
}
.heating-page .advantage-card__header {
    margin-bottom: var(--spacing-xs);
}
.heating-page .heating-description p {
    margin-bottom: var(--spacing-sm);
}
.heating-page .heating-description p:last-child {
    margin-bottom: 0;
}
.heating-page .heating-intro {
    padding: var(--spacing-sm) 0 var(--spacing-md);
}
.heating-page .heating-intro__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
}
.heating-page .heating-note {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}
.heating-page .heating-faq .faq-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}
.heating-page .heating-faq .faq-question {
    margin-bottom: var(--spacing-xs);
}
.heating-page .heating-cta-block {
    padding: var(--spacing-lg) 0;
}

/*--- Вводный блок (краткое описание + изображение) ---*/
.heating-intro {
    padding: var(--spacing-md) 0 var(--spacing-lg);
}
.heating-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}
.heating-intro__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-sm) 0;
}
.heating-intro__text {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}
.heating-intro__text strong {
    color: var(--color-dark);
}
.heating-intro__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.heating-intro .img-placeholder--boiler {
    min-height: 200px;
    max-width: 320px;
}

/*--- Блок с кнопками (Telegram, Позвонить) ---*/
.heating-cta-block {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-light);
}
.heating-cta-block__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}
.heating-cta-block__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.heating-cta-block__btn .iconify {
    font-size: 22px;
}
@media (max-width: 640px) {
    .heating-intro__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .heating-intro__visual {
        order: -1;
    }
    .img-placeholder--boiler {
        max-width: 100%;
    }
    .heating-cta-block__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .heating-cta-block__btn {
        justify-content: center;
    }
}

/*--- Заглушки для изображений ---*/
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: var(--color-bg-light);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-xl);
}
.img-placeholder .iconify {
    font-size: 48px;
    opacity: 0.5;
}
.img-placeholder__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.img-placeholder--boiler {
    min-height: 280px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.img-placeholder--scheme {
    min-height: 320px;
    width: 100%;
}


/*--- Heating Hero Section ---*/
.heating-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    padding: var(--spacing-md) 0 var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.heating-hero__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.heating-hero__title .iconify {
    font-size: 36px;
}

.heating-hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.heating-hero__text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.heating-hero__text strong {
    color: var(--color-dark);
}

/*--- Hero Stats ---*/
.heating-hero__stats {
    display: flex;
    gap: var(--spacing-xl);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-secondary);
}

.hero-stat__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.hero-stat__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/*--- Crypto Boiler Visual ---*/
.heating-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crypto-boiler-icon {
    position: relative;
    animation: float 4s ease-in-out infinite;
}

.boiler-body {
    width: 160px;
    height: 200px;
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    border-radius: var(--radius-xl);
    border: 3px solid #ccc;
    position: relative;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--spacing-lg);
}

.boiler-screen {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f7931a;
    font-size: 40px;
    margin-bottom: var(--spacing-md);
}

.boiler-flames {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 30px;
}

.boiler-flames span {
    width: 12px;
    height: 30px;
    background: linear-gradient(180deg, #f7931a 0%, #ef4444 50%, #fbbf24 100%);
    border-radius: 0;
    animation: flame 0.5s ease-in-out infinite alternate;
}

.boiler-flames span:nth-child(2) {
    height: 40px;
    animation-delay: 0.1s;
}

.boiler-flames span:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes flame {
    from { transform: scaleY(1) scaleX(1); }
    to { transform: scaleY(1.1) scaleX(0.9); }
}

.boiler-pipes {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pipe {
    width: 40px;
    height: 8px;
    border-radius: var(--radius-full);
}

.pipe--hot {
    background: linear-gradient(90deg, #ef4444 0%, var(--color-primary) 100%);
}

.pipe--cold {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/*--- Heating Sections ---*/
.heating-section {
    margin-bottom: var(--spacing-lg);
}

.heating-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.heating-section__title .iconify {
    font-size: 28px;
    color: var(--color-secondary);
}

.heating-description {
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-secondary);
}

.heating-description p {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.heating-description p:last-child {
    margin-bottom: 0;
}

/*--- Integration Scheme ---*/
.scheme-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    overflow-x: auto;
}

.heating-scheme {
    min-width: 700px;
    position: relative;
    padding: var(--spacing-lg);
}

.scheme-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.scheme-row--top {
    margin-bottom: var(--spacing-2xl);
}

.scheme-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

/*--- Boiler Element ---*/
.element-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width: 100px;
    min-height: 100px;
}

.element-box--boiler {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #fff5eb 0%, #ffe4cc 100%);
}

.element-box--boiler .iconify {
    font-size: 40px;
    color: var(--color-primary);
}

.element-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--spacing-xs);
}

.element-label-small {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.boiler-icon {
    font-size: 40px;
    color: var(--color-primary);
}

/*--- Pump Element ---*/
.pump-icon {
    position: relative;
    width: 50px;
    height: 50px;
}

.pump-body {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0;
    left: 5px;
}

.pump-motor {
    width: 20px;
    height: 25px;
    background: linear-gradient(180deg, #1f2937 0%, #374151 100%);
    border-radius: var(--radius-sm);
    position: absolute;
    top: 0;
    left: 15px;
}

/*--- Heat Exchanger Element ---*/
.exchanger-icon {
    display: flex;
    gap: 3px;
    padding: var(--spacing-sm);
    background: #f5f5f5;
    border-radius: var(--radius-sm);
    border: 2px solid #d1d5db;
}

.exchanger-plate {
    width: 8px;
    height: 50px;
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
    border-radius: 0;
}

/*--- Radiator Element ---*/
.radiator-icon {
    display: flex;
    gap: 4px;
    padding: var(--spacing-xs);
    background: #f5f5f5;
    border-radius: var(--radius-sm);
}

.radiator-section {
    width: 16px;
    height: 60px;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    border-radius: 0;
    border: 1px solid #9ca3af;
}

/*--- ASIC Element ---*/
.element-box--asic {
    border-color: var(--color-secondary);
    background: linear-gradient(135deg, #f0fdf9 0%, #ccfbf1 100%);
}

.asic-icon {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.asic-fan-mini {
    width: 30px;
    height: 30px;
    background: #1f2937;
    border-radius: var(--radius-full);
    position: relative;
}

.asic-fan-mini::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: repeating-conic-gradient(from 0deg, #555 0deg 30deg, #333 30deg 60deg);
    border-radius: var(--radius-full);
    animation: spin 2s linear infinite;
}

/*--- Valve Element ---*/
.valve-icon {
    position: relative;
    width: 40px;
    height: 50px;
}

.valve-body {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: var(--radius-sm);
    position: absolute;
    bottom: 0;
    left: 5px;
}

.valve-handle {
    width: 12px;
    height: 20px;
    background: #1f2937;
    border-radius: var(--radius-sm);
    position: absolute;
    top: 5px;
    left: 14px;
}

/*--- Cooler Element ---*/
.cooler-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cooler-body {
    width: 60px;
    height: 50px;
    background: linear-gradient(180deg, #1f2937 0%, #374151 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cooler-fan {
    width: 35px;
    height: 35px;
    background: #4b5563;
    border-radius: var(--radius-full);
    position: relative;
}

.cooler-fan::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: repeating-conic-gradient(from 0deg, #6b7280 0deg 45deg, #4b5563 45deg 90deg);
    border-radius: var(--radius-full);
    animation: spin 1.5s linear infinite;
}

.cooler-grille {
    width: 70px;
    height: 8px;
    background: repeating-linear-gradient(90deg, #9ca3af 0px, #9ca3af 2px, transparent 2px, transparent 6px);
    margin-top: 4px;
}

/*--- Scheme Lines ---*/
.scheme-lines {
    position: absolute;
    left: 100px;
    right: 100px;
    height: 20px;
    z-index: 1;
}

.scheme-lines--top {
    top: 50px;
}

.scheme-lines--bottom {
    bottom: 50px;
}

.line {
    height: 4px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.line--hot {
    background: linear-gradient(90deg, var(--color-primary) 0%, #ef4444 100%);
}

.line--cold {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/*--- Scheme Legend ---*/
.scheme-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.legend-line {
    width: 30px;
    height: 4px;
    border-radius: var(--radius-full);
}

.legend-line--hot {
    background: linear-gradient(90deg, var(--color-primary) 0%, #ef4444 100%);
}

.legend-line--cold {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/*--- Heating Advantages ---*/
.heating-advantages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.heating-advantage {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.heating-advantage:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.heating-advantage__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    color: var(--color-secondary);
    flex-shrink: 0;
}

.heating-advantage__icon .iconify {
    font-size: 24px;
}

.heating-advantage:hover .heating-advantage__icon {
    background: var(--color-secondary);
    color: var(--color-on-primary);
}

.heating-advantage__content h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-xs) 0;
}

.heating-advantage__content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/*--- Heating Note ---*/
.heating-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(0, 166, 147, 0.1) 0%, rgba(244, 121, 32, 0.1) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-secondary);
}

.heating-note .iconify {
    font-size: 24px;
    color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.heating-note p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

.heating-note--disclaimer {
    display: block;
    padding: 0;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

/*--- Heating FAQ ---*/
.heating-faq {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.faq-question .iconify {
    font-size: 20px;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.faq-question h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.faq-answer {
    padding-left: 28px;
}

.faq-answer p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

/*--- Heating CTA ---*/
.heating-cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    color: #ffffff;
    margin-bottom: var(--spacing-lg);
}

.heating-cta h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
}

.heating-cta > p {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--spacing-lg) 0;
}

.heating-cta__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.heating-cta__actions .btn {
    min-width: 200px;
}

.heating-cta__actions .btn--outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.heating-cta__actions .btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.heating-cta__note {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/*--- Heating Page Responsive ---*/
@media (max-width: 1024px) {
    .heating-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .heating-hero__stats {
        justify-content: center;
    }
    
    .heating-hero__visual {
        order: -1;
    }
    
    .heating-advantages {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .heating-hero__title {
        font-size: var(--font-size-3xl);
        justify-content: center;
    }
    
    .heating-hero__stats {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-stat {
        width: 100%;
        max-width: 200px;
    }
    
    .boiler-body {
        width: 120px;
        height: 160px;
    }
    
    .boiler-screen {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    
    .scheme-wrapper {
        padding: var(--spacing-lg);
    }
    
    .heating-cta__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .heating-cta__actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .heating-section__title {
        font-size: var(--font-size-xl);
    }
    
    .heating-advantage {
        flex-direction: column;
        text-align: center;
    }
    
    .heating-advantage__icon {
        margin: 0 auto;
    }
    
    .faq-question {
        align-items: flex-start;
    }
    
    .faq-answer {
        padding-left: 0;
    }
}

/* ========================================
   Mining Containers Page Styles
======================================== */

/*--- Containers Page Container ---*/
.containers-page {
    padding-bottom: 0;
}

/*--- Containers Hero Section ---*/
.containers-hero {
    padding: var(--spacing-sm) 0 var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.containers-hero__title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.containers-hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.containers-hero__text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.containers-hero__text strong {
    color: var(--color-dark);
}

.containers-hero__stats {
    display: flex;
    gap: var(--spacing-xl);
}

/*--- Containers Gallery Section ---*/
.containers-gallery {
    margin-bottom: var(--spacing-2xl);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    background: var(--color-bg-light);
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.gallery-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.gallery-item:hover .gallery-img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
}

/*--- Features Section ---*/
.features-section {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.features-section .section-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-sm);
}

.feature-card {
    padding: var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.feature-card:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

.feature-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.feature-card__icon {
    font-size: 20px;
    color: var(--color-dark);
    margin-top: 2px;
    flex-shrink: 0;
}

.feature-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.4;
}

.feature-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/*--- Production Section ---*/
.production-section {
    margin-bottom: var(--spacing-lg);
}

.production-info__content {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: var(--spacing-lg);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.info-block {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-secondary);
}

.info-block__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 var(--spacing-sm) 0;
}

.info-block__text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

/*--- Containers CTA Section ---*/
.containers-cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    color: #ffffff;
    margin-bottom: var(--spacing-lg);
}

.containers-cta__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
}

.containers-cta__text {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 var(--spacing-lg) 0;
}

.containers-cta__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.containers-cta__actions .btn {
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.containers-cta__actions .btn--outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.containers-cta__actions .btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.containers-cta__note {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/*--- Containers Page Responsive ---*/
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .containers-hero__title {
        font-size: var(--font-size-2xl);
    }
    
    .containers-hero__stats {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-stat {
        width: 100%;
        max-width: 200px;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-img {
        height: 250px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .feature-card {
        padding: var(--spacing-sm);
    }
    
    .production-info__content {
        padding: var(--spacing-lg);
    }
    
    .containers-cta__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .containers-cta__actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .containers-hero__title {
        font-size: var(--font-size-xl);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .gallery-img {
        height: 200px;
    }
}

/* ========================================
   Difficulty Pages Styles
======================================== */

/*--- Difficulty Stats Section ---*/
.difficulty-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.difficulty-stat-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.difficulty-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.difficulty-stat__value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.difficulty-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/*--- Compact Difficulty Stats ---*/
.difficulty-main-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.difficulty-stat-compact {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.difficulty-stat-compact--current {
    border-color: var(--color-secondary);
    border-width: 2px;
    background: linear-gradient(to bottom, rgba(0, 166, 147, 0.05), var(--color-white));
}

.difficulty-stat-compact__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-stat-compact__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.difficulty-stat-compact__value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

.difficulty-stat-compact__change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.difficulty-stat-compact__change.change-up {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}

.difficulty-stat-compact__change.change-down {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.difficulty-stat-compact__change .iconify {
    font-size: 14px;
    display: inline-block;
}

.retarget-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.retarget-info__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.retarget-info__label {
    color: var(--color-text-light);
}

.retarget-info__value {
    font-weight: 600;
    color: var(--color-dark);
}

/*--- Retarget Countdown Section ---*/
.retarget-countdown {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    color: #ffffff;
    margin-bottom: var(--spacing-md);
}

.retarget-countdown .section-title {
    color: #ffffff;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.retarget-countdown .countdown-item {
    background: rgba(255, 255, 255, 0.1);
}

.retarget-countdown .countdown-item--main {
    background: linear-gradient(135deg, #f7931a 0%, #ff6b00 100%);
}

.retarget-countdown .countdown-value {
    color: #ffffff;
}

.retarget-countdown .countdown-unit {
    color: rgba(255, 255, 255, 0.8);
}

/*--- Difficulty Chart Section ---*/
.difficulty-chart-section {
    margin-bottom: var(--spacing-md);
}

.chart-container {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    overflow-x: auto;
    max-height: 300px;
    height: 300px;
}

.chart-container canvas {
    max-width: 100%;
    height: 280px !important;
}

/*--- Difficulty History Section ---*/
.difficulty-history {
    margin-bottom: var(--spacing-md);
}

.history-table-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-height: 600px;
    overflow-y: auto;
}

.difficulty-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.difficulty-table th,
.difficulty-table td {
    padding: 4px var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.difficulty-table th {
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    background: var(--color-bg-light);
}

.difficulty-table td {
    color: var(--color-text);
}

.difficulty-table tbody tr:hover {
    background: var(--color-bg-light);
}

.difficulty-table tbody tr:last-child td {
    border-bottom: none;
}

.change-up {
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.change-down {
    color: #dc2626;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.change-up .iconify,
.change-down .iconify {
    font-size: 14px;
    display: inline-block;
}

/*--- Page Description Links ---*/
.page-description a,
.network-two-col__intro a {
    color: var(--color-secondary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast);
}

.page-description a:hover,
.network-two-col__intro a:hover {
    text-decoration-color: var(--color-secondary);
}

/*--- Difficulty Pages Responsive ---*/
@media (max-width: 1024px) {
    .difficulty-stats {
        grid-template-columns: 1fr;
    }
    
    .difficulty-main-stats {
        grid-template-columns: 1fr;
    }
    
    .retarget-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .chart-container {
        padding: var(--spacing-md);
    }
    
    .chart-container canvas {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .retarget-countdown .countdown-timer {
        flex-wrap: wrap;
    }
    
    .retarget-countdown .countdown-item--main {
        flex-basis: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .difficulty-table {
        font-size: var(--font-size-xs);
    }
    
    .difficulty-table th,
    .difficulty-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .difficulty-stat-compact__value {
        font-size: var(--font-size-base);
    }
    
    .difficulty-stat-compact__row {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .difficulty-stat__value {
        font-size: var(--font-size-xl);
    }
    
    .history-table-wrapper {
        overflow-x: auto;
    }
    
    .difficulty-table {
        min-width: 600px;
    }
}

/* ========================================
   Scroll buttons — наверх / вниз
======================================== */
.scroll-buttons {
    position: fixed;
    right: 12px;
    bottom: 24px;
    z-index: 9999;
    pointer-events: none;
}

.scroll-buttons .scroll-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-lg);
    background: rgba(88, 2, 163, 0.65);
    color: var(--color-on-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-base), transform var(--transition-fast), opacity var(--transition-base);
    opacity: 0.9;
}

.scroll-buttons .scroll-btn:hover {
    background: rgba(88, 2, 163, 0.85);
    transform: scale(1.05);
    opacity: 1;
}

.scroll-buttons .scroll-btn:active {
    transform: scale(0.98);
}

.scroll-buttons .scroll-btn svg {
    width: 22px;
    height: 22px;
}

.scroll-buttons.scroll-btn--hidden .scroll-btn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
}

/* ========================================
   ASIC hints (data/asics.json)
======================================== */
.asic-hint--ready {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.2em;
    vertical-align: baseline;
    max-width: 100%;
}

.asic-hint__btn {
    flex: 0 0 auto;
    align-self: flex-start;
    position: relative;
    top: -0.2em;
    width: 1.15em;
    height: 1.15em;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    font-size: 0.6em;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-on-primary);
    background: rgba(88, 2, 163, 0.75);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.2));
    transition: background var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
}

.asic-hint__btn:hover,
.asic-hint__btn:focus-visible {
    background: rgba(88, 2, 163, 0.95);
    outline: none;
}

.asic-hint__btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(88, 2, 163, 0.5);
}

.asic-hint__text {
    display: inline;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 0.12em;
    text-decoration-thickness: 1px;
    cursor: help;
}

.asic-hint__popover {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 5000;
    min-width: 140px;
    max-width: var(--tooltip-popover-max-width);
    padding: var(--tooltip-popover-padding);
    font-family: var(--font-family);
    font-size: var(--tooltip-popover-font-size);
    font-weight: var(--tooltip-popover-font-weight);
    line-height: var(--tooltip-popover-line-height);
    color: var(--tooltip-popover-color);
    background: var(--tooltip-popover-bg);
    border-radius: var(--tooltip-popover-radius);
    box-shadow: var(--tooltip-popover-shadow);
    text-align: left;
}

/* Вложенность под .heating-description p / .product-page-twocol__block p — иначе цвет текста попапа наследуется как у абзаца (серый на тёмном фоне) */
.asic-hint__popover .asic-hint__popover-line {
    margin: 0 0 0.25em;
    color: var(--tooltip-popover-color);
}

.asic-hint__popover .asic-hint__popover-line:last-child {
    margin-bottom: 0;
}

@media (hover: hover) {
    .asic-hint--ready:hover .asic-hint__popover {
        display: block;
    }
}

.asic-hint--ready.asic-hint--open .asic-hint__popover,
.asic-hint--ready:focus-within .asic-hint__popover {
    display: block;
}

/* ========================================
   Тёмная тема (класс theme-dark на <html>)
======================================== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* В шапке: справа от «Позвонить»; на десктопе — та же высота, что у пиллов контактов */
.nav-top__right .theme-toggle {
    width: 48px;
    height: 48px;
}

@media (min-width: 1025px) {
    .nav-top__right {
        align-items: stretch;
    }

    .nav-top__right .theme-toggle {
        align-self: stretch;
        width: auto;
        min-width: 2.75rem;
        height: auto;
        min-height: 0;
        padding: 0 var(--spacing-sm);
    }
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    outline: none;
}

.theme-toggle__icon {
    font-size: 22px;
}

html.theme-dark {
    color-scheme: dark;
    --color-primary: #9b6dff;
    --color-primary-hover: #8558e8;
    --color-secondary: #b894ff;
    --color-secondary-hover: #9b6dff;
    --color-dark: #ececf3;
    --color-text: #c9c9d4;
    --color-text-light: #9494a3;
    --color-white: #22222e;
    --color-bg: #12121a;
    --color-bg-light: #1b1b26;
    --color-border: #38384a;
    --color-text-strong: #f4f4fa;
    --color-footer-bg: #08080f;
    --tooltip-popover-bg: #2c2c38;
    --tooltip-popover-color: #f0f0f6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.6);
}

html.theme-dark .hero-banner {
    background: linear-gradient(135deg, #2a1f3c 0%, #231934 50%, #1c152c 100%);
}

html.theme-dark .hero-banner__title {
    color: #d8c0ef;
}

html.theme-dark .hero-banner__pill {
    color: var(--color-text);
    background: rgba(32, 28, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html.theme-dark .hero-banner__pill:hover {
    background: rgba(44, 38, 60, 0.98);
    color: var(--color-text-strong);
}

html.theme-dark .btn--outline:hover,
html.theme-dark .btn--outline:focus-visible {
    background: linear-gradient(180deg, #2a2836 0%, #342d42 100%);
    color: var(--color-text-strong);
}

html.theme-dark .element-box--boiler {
    background: linear-gradient(135deg, #3a2c24 0%, #4a3628 100%);
}

html.theme-dark .element-box--asic {
    background: linear-gradient(135deg, #142a26 0%, #18322c 100%);
}

html.theme-dark .exchanger-icon {
    background: #2a2a34;
    border-color: var(--color-border);
}

html.theme-dark .radiator-icon {
    background: #25252e;
}

html.theme-dark .header.header--scrolled {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}