@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&display=swap');

  /* === DESIGN TOKENS (CSS VARIABLES) === */
  /* Логика: Токены извлечены из анализа SOURCE_CSS для обеспечения консистентности. */
  :root {
    /* Цвета */
    --color-background-deep: #001328;
    --color-background-main: #002449;
    --color-background-card: #003266;
    --color-background-card-secondary: #004a97;
    --color-accent-primary: #fa4d00;
    --color-accent-primary-hover: #ff6b1a;
    --color-accent-secondary: #428cdc;
    --color-accent-secondary-dark: #0a4c99;
    --color-accent-tertiary: #fee801;
    --color-text-primary: #ffffff;
    --color-text-secondary: #cbd5e1;
    --color-text-link: #fa5800;
    --color-border-primary: #254b74;
    --color-border-secondary: #428cdc;
    --color-success: #87c209;
    --color-error: #ff2727;

    /* Типографика */
    --font-family-base: 'Roboto', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px; /* Base */
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-h4: 22px;
    --font-size-h3: 25px;
    --font-size-h2: 30px;
    --font-size-h1: 40px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;

    /* Отступы */
    --spacing-unit: 8px;
    --spacing-xs: var(--spacing-unit);      /* 8px */
    --spacing-sm: calc(var(--spacing-unit) * 1.5); /* 12px */
    --spacing-md: calc(var(--spacing-unit) * 2);   /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);   /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);   /* 32px */
    --spacing-xxl: calc(var(--spacing-unit) * 6);  /* 48px */

    /* Радиусы скругления */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 100px;

    /* Тени */
    --shadow-cta: 0 1px 24px 0 rgba(250, 83, 0, 0.7);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-widget: 0 10px 30px rgba(10, 76, 153, 0.3);

    /* Переходы */
    --transition-base: 0.3s ease;
  }

  /* === CSS RESET & BASE STYLES === */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background-main);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  input, button, textarea, select {
    font: inherit;
    border: none;
    background: none;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
  a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: var(--transition-base);
  }
  a:hover {
    text-decoration: underline;
  }
  ul, ol {
    list-style: none;
  }
  h1, h2, h3, h4 {
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
  }
  h1 { font-size: var(--font-size-h1); }
  h2 { font-size: var(--font-size-h2); }
  h3 { font-size: var(--font-size-h3); }
  h4 { font-size: var(--font-size-h4); }
  .container {
    width: 100%;
    max-width: 1310px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* === UTILITIES === */
  .button, .main-offer__cta-button, .onboarding-simulator__button, .hero-offer__cta, .sticky-cta__button, .bonus-calculator__button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background-color: var(--color-accent-primary);
    border: 1px solid var(--color-accent-primary);
    border-radius: var(--border-radius-full);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-cta);
  }
  .button:hover, .main-offer__cta-button:hover, .onboarding-simulator__button:hover, .hero-offer__cta:hover, .sticky-cta__button:hover, .bonus-calculator__button:hover {
    background-color: var(--color-accent-primary-hover);
    border-color: var(--color-accent-primary-hover);
    box-shadow: none;
    text-decoration: none;
    transform: translateY(-2px);
  }
  .button--primary {
    /* Already covered by base .button */
  }
  .data-table-container, .provider-grid, .faq-accordion, .limits-accordion, .bonus-calculator, .data-sheet {
    background-color: var(--color-background-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
  }
  .data-table-container__title, .provider-grid__title, .faq-accordion__title, .limits-accordion__title, .bonus-calculator__title, .data-sheet__title {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 4px solid var(--color-accent-secondary);
  }

  /* === COMPONENT: SiteHeader === */
  .main-header {
    background: linear-gradient(180deg, #003266, #0a509c);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main-header__logo img {
    max-width: 170px;
  }
  .main-nav {
    display: none; /* Mobile first: nav is hidden */
  }
  .main-nav__list {
    display: flex;
    gap: var(--spacing-lg);
  }
  .main-nav__link {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }
  .main-header__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    height: 24px;
    justify-content: center;
  }
  .main-header__burger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--color-text-primary);
    border-radius: 2px;
  }

  .main-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  .main-header__actions .button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

/* Стили для открытого меню на мобильных */
.main-header__nav.is-open {
    display: block;
    position: absolute;
    top: 100%; /* Появляется сразу под хедером */
    left: 0;
    width: 100%;
    background-color: var(--color-background-card);
    padding: var(--spacing-lg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.main-header__nav.is-open .main-nav__list {
    flex-direction: column;
    align-items: center;
}

/* Анимация иконки бургера в крестик */
.main-header__burger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.main-header__burger.is-active span:nth-child(2) {
    opacity: 0;
}
.main-header__burger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.main-header__burger span {
    transition: var(--transition-base); /* Добавляем плавность анимации */
}

/* === COMPONENT: SiteFooter === */
.main-footer {
    background-color: var(--color-background-deep);
    padding-top: var(--spacing-xxl);
    font-size: var(--font-size-sm);
}
.main-footer .container {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
    text-align: center;
}
.footer-column__logo {
    display: inline-block;
    margin-bottom: var(--spacing-lg);
}
.footer-column__logo img {
    max-width: 200px;
    margin: 0 auto;
}
.footer-column__warning {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}
.footer-column__trust-seals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md); /* Уменьшаем отступ между элементами */
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}
.trust-seal {
    border: 1px solid var(--color-border-primary);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}
.footer-column__payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    color: var(--color-text-secondary);
}
.footer-column__payment-methods span {
    background-color: var(--color-background-main);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
}
.footer-column__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}
.footer-column__list li {
    margin-bottom: var(--spacing-sm);
}
.footer-column__list a {
    color: var(--color-accent-secondary);
}
.main-footer__copyright {
    background-color: var(--color-background-main);
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

  /* === COMPONENT: HeroOffer === */
  .hero-offer {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    background-color: var(--color-background-deep);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
  }
  .hero-offer__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-black);
    margin-bottom: var(--spacing-sm);
  }
  .hero-offer__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
  }
  .hero-offer__main-offer {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-tertiary);
    margin-bottom: var(--spacing-xl);
  }
  .hero-offer__cta {
    margin-bottom: var(--spacing-xl);
  }
  .hero-offer__features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }

  /* === COMPONENT: MainBrandOffer === */
  .main-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-background-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
  }
  .main-offer__logo {
    max-width: 150px;
    margin-bottom: var(--spacing-md);
  }
  .main-offer__title {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-sm);
  }
  .main-offer__condition {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
  }
  .main-offer__cta-button {
    margin-bottom: var(--spacing-md);
  }
  .main-offer__promo-code {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* === COMPONENT: StickyCTA === */
  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-background-card);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
  }
  .sticky-cta__brand {
    font-weight: var(--font-weight-bold);
  }
  .sticky-cta__offer {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }
  .sticky-cta__button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* === COMPONENT: ExpertRatingCard === */
  .expert-rating-card {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border-primary);
  }
  .expert-rating-card__main {
    text-align: center;
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-primary);
  }
  .expert-rating-card__summary {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
  }
  .expert-rating-card__score {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-black);
    color: var(--color-accent-tertiary);
  }
  .expert-rating-card__stars {
    color: var(--color-accent-tertiary);
    font-size: var(--font-size-xl);
  }
  .rating-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  .rating-item__label {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rating-item__progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-background-main);
    border-radius: var(--border-radius-full);
    overflow: hidden;
  }
  .rating-item__progress {
    height: 100%;
    background-color: var(--color-accent-secondary);
    border-radius: var(--border-radius-full);
  }
  .rating-item__value {
    text-align: right;
    font-weight: var(--font-weight-bold);
  }

  /* === COMPONENT: AuthorBox === */
  .author-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    background-color: var(--color-background-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
  }
  .author-box__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-accent-secondary);
  }
  .author-box__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
  }
  .author-box__title {
    color: var(--color-accent-secondary);
    margin-bottom: var(--spacing-sm);
  }
  .author-box__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* === COMPONENT: LicenseInfo & EvidenceBox & UpdateBanner === */
  .license-info, .evidence-box, .update-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-background-card);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-primary);
  }
  .license-info__icon, .evidence-box__icon, .update-banner__icon {
    width: 24px; /* или любой другой подходящий размер */
    height: 24px;
    color: var(--color-success);
  }
  .evidence-box {
    align-items: flex-start;
    flex-direction: column;
  }
  .evidence-box__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
  .evidence-box__title {
    font-size: var(--font-size-lg);
  }
  .evidence-box__content {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding-left: calc(var(--font-size-lg) + var(--spacing-sm));
  }
  .evidence-box__source a {
    color: var(--color-accent-secondary);
  }
  .update-banner__date {
    font-weight: var(--font-weight-bold);
  }

  /* === COMPONENT: ProsCons === */
  .pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  .pros-cons__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  .pros-cons__column--pros .pros-cons__title { color: var(--color-success); }
  .pros-cons__column--cons .pros-cons__title { color: var(--color-error); }
  .pros-cons__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .pros-cons__item {
    padding-left: var(--spacing-lg);
    position: relative;
  }
  .pros-cons__item::before {
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: var(--font-weight-bold);
  }
  .pros-cons__column--pros .pros-cons__item::before {
    content: '✓';
    color: var(--color-success);
  }
  .pros-cons__column--cons .pros-cons__item::before {
    content: '✗';
    color: var(--color-error);
  }

  /* === COMPONENT: ResponsibleGamingBlock, SecurityAndFairness, AwardsAndRecognition === */
  .responsible-gaming-block, .security-fairness, .awards-recognition {
    background: var(--color-background-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
  }
  .responsible-gaming-block__title, .awards-recognition__title {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-md);
  }
  .responsible-gaming-block__text {
    color: var(--color-text-secondary);
  }
  .security-fairness {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  .security-fairness__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }
  .security-fairness__icon {
    font-size: var(--font-size-h2);
    color: var(--color-accent-secondary);
  }
  .awards-recognition__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-lg);
    text-align: center;
  }
  .award-item__logo {
    max-height: 60px;
    margin: 0 auto var(--spacing-xs);
    filter: grayscale(1) brightness(2);
  }
  .award-item__year {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* === COMPONENT: RegistrationSteps === */
  .reg-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }
  .reg-steps__item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
  }
  .reg-steps__number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background-color: var(--color-background-card);
    border: 2px solid var(--color-accent-secondary);
    border-radius: 50%;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-secondary);
  }
  .reg-steps__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
  }
  .reg-steps__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

/* === COMPONENT: QuickDeposit & ProviderGrid === */

.quick-deposit,
.provider-grid {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.quick-deposit__title,
.provider-grid__title {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 4px solid var(--color-accent-secondary);
    text-align: left; /* Выравниваем заголовок по левому краю */
}

.provider-grid__logos {
    display: flex;
    flex-wrap: wrap; /* Элементы будут переноситься на новую строку */
    gap: var(--spacing-sm); /* Отступы между плашками */
}

.provider-grid__logos span {
    background-color: var(--color-background-main);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-md); /* 8px 16px */
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-primary);
    transition: var(--transition-base);
    cursor: default; /* Обычный курсор, т.к. это не ссылки */
}

.provider-grid__logos span:hover {
    background-color: var(--color-accent-secondary-dark);
    border-color: var(--color-accent-secondary);
    color: var(--color-text-primary);
}

/* Старые стили для QuickDeposit, если они тебе еще нужны */
.quick-deposit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    align-items: center;
}
.quick-deposit__logo {
    background-color: var(--color-text-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xs);
    object-fit: contain;
    height: 50px;
    width: 100%;
}
  /* === COMPONENT: AppDownloadBlock === */
  .app-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
    background-color: var(--color-background-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
  }
  .app-download__image {
    width: 100px;
    height: 100px;
  }
  .app-download__title {
    font-size: var(--font-size-h3);
  }
  .app-download__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .app-download__button img {
    max-height: 50px;
  }
  
  /* === COMPONENT: *Table === */
  .data-table-wrapper {
    overflow-x: auto;
  }
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }
  .data-table thead {
    display: none; /* Hidden on mobile */
  }
  .data-table tbody tr {
    display: block;
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-background-main);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
  }
  .data-table td {
    display: block;
    text-align: right;
    position: relative;
    padding-left: 50%;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  .data-table td::before {
    content: attr(data-label);
    position: absolute;
    left: var(--spacing-sm);
    width: calc(50% - var(--spacing-lg));
    text-align: left;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .promo-code {
    background-color: var(--color-background-deep);
    border: 1px dashed var(--color-accent-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-weight: bold;
    color: var(--color-accent-tertiary);
  }
  .comparison-table .is-highlighted {
    background-color: var(--color-accent-secondary-dark);
    font-weight: var(--font-weight-bold);
  }

  /* === COMPONENT: SlotDataSheet === */
  .data-sheet__list {
    display: flex;
    flex-direction: column;
  }
  .data-sheet__item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-primary);
  }
  .data-sheet__item:last-child {
    border-bottom: none;
  }
  .data-sheet__key {
    color: var(--color-text-secondary);
  }
  .data-sheet__value {
    font-weight: var(--font-weight-bold);
  }

  /* === COMPONENT: *Accordion === */
  .faq-item, .limits-item {
    border-bottom: 1px solid var(--color-border-primary);
  }
  .faq-item__question, .limits-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    text-align: left;
  }
  .faq-item__icon, .limits-item__icon {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    transition: transform var(--transition-base);
  }
  .faq-item__answer, .limits-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  .faq-item__answer p, .limits-item__answer p {
    padding-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
  }
  /* JS would add .is-open to the .faq-item/.limits-item */
  .faq-item.is-open .faq-item__icon, .limits-item.is-open .limits-item__icon {
    transform: rotate(45deg);
  }
  .faq-item.is-open .faq-item__answer, .limits-item.is-open .limits-item__answer {
    max-height: 500px; /* Arbitrary large value */
  }

  /* === COMPONENT: InteractiveBonusCalculator === */
  .bonus-calculator__inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  .form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }
  .form-group input {
    width: 100%;
    background: var(--color-background-main);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
  }
  .bonus-calculator__button {
    width: 100%;
    margin-bottom: var(--spacing-lg);
  }
  .bonus-calculator__result {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-background-main);
    border-radius: var(--border-radius-md);
  }
  #wagerAmount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-tertiary);
  }

  /* === COMPONENT: TableOfContents === */
  .toc {
    background: var(--color-background-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
  }
  .toc__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  .toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .toc__item a {
    color: var(--color-accent-secondary);
    text-decoration: underline;
  }

  /* === COMPONENT: VideoEmbed === */
  .video-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
  }
  .video-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .video-embed__caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-sm);
  }

  /* === COMPONENT: EligibilityChecklist === */
  .checklist {
    background-color: var(--color-background-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
  }
  .checklist__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  .checklist__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .checklist__item {
    position: relative;
    padding-left: var(--spacing-lg);
  }
  .checklist__item::before {
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: var(--font-weight-bold);
  }
  .checklist__item--valid::before {
    content: '✓';
    color: var(--color-success);
  }
  .checklist__item--invalid::before {
    content: '✗';
    color: var(--color-error);
  }

  /* === COMPONENT: PaymentSpeedMeter === */
  .speed-meter__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    text-align: center;
  }
  .speed-meter__bar {
    height: 12px;
    background: var(--color-background-main);
    border-radius: var(--border-radius-full);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
  }
  .speed-meter__progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), var(--color-accent-tertiary), var(--color-error));
    border-radius: var(--border-radius-full);
  }
  .speed-meter__labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  /* === COMPONENT: OnboardingSimulator === */
  .onboarding-simulator {
    background-color: var(--color-background-card);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
  }
  .onboarding-simulator__title {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-xs);
  }
  .onboarding-simulator__subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
  }
  .onboarding-simulator__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  .onboarding-simulator__label {
    display: none; /* Placeholder is sufficient */
  }
  .onboarding-simulator__input {
    width: 100%;
    background: var(--color-background-main);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
  }
  .onboarding-simulator__input:disabled {
    opacity: 0.7;
  }
  .onboarding-simulator__terms {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }
  .onboarding-simulator__terms a {
    color: var(--color-accent-secondary);
    text-decoration: underline;
  }

  /* ==========================================================================
     # ADAPTIVE STYLES (TABLET & DESKTOP)
     ========================================================================== */
  
  @media (min-width: 768px) {
    /* === GENERAL === */
    .container {
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
    }
    
    /* === HEADER === */
    .main-header__burger {
      display: none;
    }
    .main-nav {
      display: block;
    }
    
    /* === FOOTER === */
    .main-footer .container {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      text-align: left;
    }
    .footer-column__logo img {
      margin: 0;
    }
    .footer-column__trust-seals, .footer-column__payment-logos {
      justify-content: flex-start;
    }
    
    /* === COMPONENTS === */
    .author-box {
      flex-direction: row;
      text-align: left;
      align-items: flex-start;
    }
    .pros-cons {
      grid-template-columns: 1fr 1fr;
    }
    .app-download {
      flex-direction: row;
      text-align: left;
    }
    .app-download__buttons {
      flex-direction: row;
    }
    .sticky-cta {
      /* Sticky CTA is often mobile-only */
      display: none;
    }
    .data-table thead {
      display: table-header-group;
    }
    .data-table tbody tr {
      display: table-row;
      margin-bottom: 0;
      background: none;
      border: none;
      padding: 0;
    }
    .data-table tr:nth-child(even) {
        background-color: var(--color-background-main);
    }
    .data-table td {
      display: table-cell;
      text-align: left;
      position: static;
      padding-left: var(--spacing-sm);
      padding: var(--spacing-sm);
      border-bottom: 1px solid var(--color-border-primary);
    }
    .data-table td::before {
      display: none;
    }
    .data-table th {
      padding: var(--spacing-md) var(--spacing-sm);
      text-align: left;
      font-weight: var(--font-weight-bold);
      border-bottom: 2px solid var(--color-accent-secondary);
    }
    .bonus-calculator__inputs {
      grid-template-columns: repeat(3, 1fr);
    }
    .onboarding-simulator__form {
      flex-direction: row;
      align-items: flex-end;
    }
    .onboarding-simulator__input-group {
      flex-grow: 1;
    }
    .onboarding-simulator__input {
      text-align: left;
    }
    .onboarding-simulator__button {
      flex-shrink: 0;
    }
    .hero-offer__features {
      flex-direction: row;
      justify-content: center;
      gap: var(--spacing-lg);
    }
  }

  @media (min-width: 1024px) {
    /* === GENERAL === */
    h1 { font-size: calc(var(--font-size-h1) * 1.2); }
    h2 { font-size: calc(var(--font-size-h2) * 1.1); }
  }```


.container img, .hero-offer + img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) 0; /* Добавляет отступы сверху и снизу для красоты */
    border-radius: var(--border-radius-md); /* Опционально: скругляет углы, как у других элементов */
}

/* === SVG ICON FIX === */
/* Правило, чтобы встроенные SVG-иконки не растягивались */
article svg {
    display: inline-block;  /* Чтобы иконка была в строке с текстом */
    width: 1em;             /* Ширина равна размеру шрифта родителя */
    height: 1em;            /* Высота равна размеру шрифта родителя */
    vertical-align: -0.15em;/* Слегка опускаем иконку для красивого выравнивания */
    fill: currentColor;     /* Иконка будет того же цвета, что и текст */
}

/* Дополнительное правило на случай, если SVG вставлен как <img> */
article img[src$=".svg"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

/* === ARTICLE CONTENT STYLING FIX === */

/* 1. Добавляем "воздух" между всеми основными элементами в статье */
article > * + * {
    margin-top: var(--spacing-lg); /* 24px - основной отступ между блоками */
}

/* 2. Усиливаем визуальную иерархию заголовков */
article h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-black); /* Делаем H2 еще жирнее */
    margin-top: var(--spacing-xxl); /* Увеличиваем отступ ПЕРЕД H2 */
    margin-bottom: var(--spacing-md); /* Уменьшаем отступ ПОСЛЕ H2 до следующего параграфа */
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-border-primary); /* Добавляем красивую линию-разделитель */
}

article h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-secondary); /* Выделяем H3 акцентным цветом */
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

/* 3. Стилизуем параграфы и списки */
article p {
    color: var(--color-text-secondary); /* Делаем основной текст чуть менее ярким, чем заголовки */
    line-height: 1.7; /* Увеличиваем межстрочный интервал для лучшей читаемости */
}

article ol,
article ul {
    color: var(--color-text-secondary);
    line-height: 1.7;
    padding-left: var(--spacing-lg); /* Добавляем внутренний отступ для списка */
}

article ol li,
article ul li {
    padding-left: var(--spacing-sm); /* Отступ от маркера до текста */
    margin-bottom: var(--spacing-sm); /* Отступ между пунктами списка */
}

/* 4. Возвращаем стандартные маркеры для списков */
article ul {
    list-style: disc; /* Круглые маркеры для UL */
}

article ol {
    list-style: decimal; /* Цифры для OL */
}

/* 5. Выделяем жирный текст внутри параграфов */
article p strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

/* === COMPONENT: BonusGrid & BonusCard-v2 === */

.bonus-grid {
    margin-bottom: var(--spacing-xl);
}

.bonus-grid__title {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 4px solid var(--color-accent-secondary);
}

.bonus-grid__container {
    display: grid;
    grid-template-columns: 1fr; /* Одна колонка на мобильных */
    gap: var(--spacing-lg);
}

.bonus-card-v2 {
    display: flex;
    flex-direction: column;
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
}

.bonus-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.bonus-card-v2__visual {
    order: -1; /* Ставим картинку НАД текстом */
}

.bonus-card-v2__visual img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.bonus-card-v2__content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bonus-card-v2__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.bonus-card-v2__title {
    font-size: var(--font-size-xl);
    line-height: 1.3;
}

.bonus-card-v2__tag {
    background-color: var(--color-accent-secondary);
    color: var(--color-text-primary);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    margin-left: var(--spacing-sm);
}

.bonus-card-v2__offer {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
}

.bonus-card-v2__offer a {
    color: var(--color-accent-tertiary);
}

.bonus-card-v2__cta {
    width: 100%;
    margin-top: auto; /* Прижимает кнопку к низу */
}

/* Адаптивность для десктопов */
@media (min-width: 768px) {
    .bonus-grid__container {
        grid-template-columns: repeat(2, 1fr);
    }

    .bonus-card-v2 {
        flex-direction: row; /* Картинка слева, текст справа */
    }

    .bonus-card-v2__visual {
        order: 0; /* Возвращаем стандартный порядок */
        flex-basis: 40%; /* Картинка занимает 40% ширины */
        flex-shrink: 0;
    }

    .bonus-card-v2__visual img {
        height: 100%; /* Картинка растягивается на всю высоту карточки */
    }

    .bonus-card-v2__content {
        flex-basis: 60%; /* Текст занимает 60% ширины */
    }
}

/* === COMPONENT: AppPromoBlock === */

.app-promo-block {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    border: 1px solid var(--color-border-primary);
    margin-top: var(--spacing-xl); /* Добавляем отступ сверху */
}

.app-promo-block__icon {
    margin: 0 auto var(--spacing-lg);
    color: var(--color-accent-secondary);
}

.app-promo-block__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.app-promo-block__subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    max-width: 600px; /* Ограничиваем ширину подзаголовка */
    margin-left: auto;
    margin-right: auto;
}

.app-promo-block__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xl);
}

.app-promo-block__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Адаптивность для десктопов */
@media (min-width: 768px) {
    .app-promo-block {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon content actions";
        align-items: center;
        text-align: left;
        gap: var(--spacing-xl);
    }

    .app-promo-block__icon {
        grid-area: icon;
        margin: 0;
    }

    .app-promo-block__content {
        grid-area: content;
    }
    
    .app-promo-block__title,
    .app-promo-block__subtitle,
    .app-promo-block__features {
        margin-bottom: var(--spacing-md);
        margin-left: 0;
        margin-right: 0;
    }

    .app-promo-block__features {
        justify-content: flex-start;
    }

    .app-promo-block__actions {
        grid-area: actions;
        flex-direction: column;
        align-items: flex-end;
    }
}

/* === COMPONENT: Testimonial === */

.testimonial {
    background-color: var(--color-background-card);
    border-left: 4px solid var(--color-accent-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-xl); /* Добавляем отступ сверху */
    position: relative;
}

.testimonial__icon {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    color: var(--color-accent-secondary);
    opacity: 0.1;
    transform: scale(1.5);
}

.testimonial__text {
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    position: relative; /* Чтобы текст был поверх иконки */
    z-index: 1;
}

.testimonial__author {
    text-align: right;
    position: relative;
    z-index: 1;
}

.testimonial__author-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.testimonial__author-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* === COMPONENT: GameGrid & GameCard === */

.game-grid {
    margin-bottom: var(--spacing-xl);
}

.game-grid__title {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 4px solid var(--color-accent-secondary);
}

.game-grid__container {
    display: grid;
    /* Адаптивная сетка: 2 колонки на мобилке, больше - на десктопе */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.game-card {
    position: relative; /* База для позиционирования оверлея */
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Скрывает все, что выходит за рамки */
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.game-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка всегда заполняет всю карточку */
    transition: transform 0.4s ease;
}

.game-card:hover .game-card__image {
    transform: scale(1.1); /* Эффект приближения при наведении */
}

.game-card__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: var(--color-text-primary);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    transition: var(--transition-base);
    z-index: 2;
}

.game-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 36, 73, 0.8); /* Полупрозрачный синий фон */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    opacity: 0; /* Изначально оверлей полностью прозрачный */
    transition: var(--transition-base);
    z-index: 3;
}

.game-card:hover .game-card__overlay {
    opacity: 1; /* Показываем оверлей при наведении */
}

.game-card__button {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    padding: var(--spacing-sm) var(--spacing-xl);
    text-transform: uppercase;
    transition: var(--transition-base);
}

.game-card__button.button--primary {
    background-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}
.game-card__button.button--primary:hover {
    background-color: var(--color-accent-primary-hover);
}

.game-card__button.button--secondary {
    background-color: transparent;
    border: 2px solid var(--color-text-primary);
    color: var(--color-text-primary);
}
.game-card__button.button--secondary:hover {
    background-color: var(--color-text-primary);
    color: var(--color-background-deep);
}

.game-grid__more-button {
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: var(--color-accent-secondary);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

/* Стили для нового блока ссылок на 404 странице */
.quick-nav-links {
    margin-top: var(--spacing-xl, 40px);
    margin-bottom: var(--spacing-lg, 30px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 15px);
    width: 100%;
    max-width: 500px;
    text-align: left;
}

.quick-nav-links__title {
    font-size: 1.1rem;
    color: var(--color-text-secondary, #ccc);
    margin-bottom: var(--spacing-sm, 10px);
    text-align: center;
}

.quick-nav-link {
    display: block;
    padding: var(--spacing-md, 15px);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-md, 8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.quick-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

.quick-nav-link strong {
    display: block;
    font-size: 1.1em;
    color: var(--color-text-primary, #fff);
    margin-bottom: 5px;
}

.quick-nav-link span {
    font-size: 0.9em;
    color: var(--color-text-secondary, #ccc);
}

/* ==========================================================================
   # COMPONENT: 404 Error Page (v2)
   ========================================================================== */

/* Главный контейнер страницы 404 */
.error-page-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) 0;
    min-height: 70vh; /* Чтобы контент был по центру, даже если на странице больше ничего нет */
}

/* Стили для "слот-машины" с цифрами 404 */
.slot-machine {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.slot-machine__reels {
    display: flex;
    gap: var(--spacing-md);
}

.reel {
    width: 100px;
    height: 140px;
    background-color: var(--color-background-deep);
    border: 3px solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    display: grid;
    place-items: center;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.3);
}

.reel span {
    font-family: var(--font-family-base);
    font-size: 80px; /* Крупный размер для эффекта */
    font-weight: var(--font-weight-black);
    color: var(--color-accent-tertiary);
    text-shadow: 0 0 15px rgba(254, 232, 1, 0.5); /* Добавляем свечение */
}

/* Стили для заголовка и подзаголовка */
.error-page-v2__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.error-page-v2__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px; /* Ограничиваем ширину для лучшей читаемости */
    margin-bottom: var(--spacing-xl);
}

/* Контейнер для кнопок */
.error-page-v2__actions {
    display: flex;
    flex-wrap: wrap; /* Позволяет кнопкам переноситься на новую строку на маленьких экранах */
    justify-content: center;
    gap: var(--spacing-md);
}

/* Адаптация размера "барабанов" для мобильных */
@media (max-width: 480px) {
    .reel {
        width: 70px;
        height: 100px;
    }
    .reel span {
        font-size: 50px;
    }
}

/* === CUSTOM HEADER BUTTONS === */

/* Стиль для вторичной кнопки (Авторизация) */
.button--secondary {
    background-color: transparent;
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    box-shadow: none;
}

.button--secondary:hover {
    background-color: var(--color-accent-secondary);
    border-color: var(--color-accent-secondary);
    color: var(--color-text-primary);
}

/* По умолчанию скрываем кнопку авторизации (подход Mobile First) */
.button--desktop-only {
    display: none;
}

/* Показываем кнопку авторизации на экранах от 768px и больше */
@media (min-width: 768px) {
    .button--desktop-only {
        display: inline-block;
    }
}

/* ==========================================================================
   # FIX: Кнопка регистрации на мобильных устройствах
   ========================================================================== */

/* 
 * Это правило исправляет кнопку "REGISZTRÁCIÓ KEZDÉSE...",
 * позволяя тексту внутри нее переноситься на несколько строк.
*/
.onboarding-simulator__button {
    white-space: normal;  /* РАЗРЕШАЕМ тексту переноситься */
    height: auto;         /* ПОЗВОЛЯЕМ высоте кнопки автоматически увеличиваться */
    line-height: 1.4;     /* Улучшаем читаемость, если текст в две строки */
    
    /* Опционально: можно сделать вертикальные отступы чуть больше для красоты */
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}