/* ==========================================================================
   SAVASPIN FINAL - MONTSERRAT FONT & EXACT COLORS
   ========================================================================== */
/* 1. Импортируем Montserrat (жирные начертания включены) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- ПАЛИТРА (УТВЕРЖДЕННАЯ) --- */
  --bg-body: #071f1f; 
  --bg-surface: #092929; 
  --bg-header-footer: #092929;
  --bg-element: #0b3333;
  
  --accent-primary: #305aff; 
  --accent-hover: #2546cc;
  --brand-green: #00e380;    
  
  --text-main: #ffffff;
  --text-muted: #a4b5b8;     
  --border-color: #123f3f;   

  --color-success: #00e380;
  --color-error: #ff3045;

  /* --- UI --- */
  --block-radius: 16px;
  --btn-radius: 8px;
  --transition: 0.2s ease-in-out;
  --container-width: 1240px;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    
    /* 2. Применяем Montserrat */
    font-family: 'Montserrat', sans-serif;
    
    /* === НОВЫЙ ФОН (Mesh Gradient / Жидкий градиент) === */
    background-color: #021515; /* Очень темная база */
    background-image: 
        /* Лаймовое свечение (сверху слева) */
        radial-gradient(at 15% 15%, rgba(0, 227, 128, 0.08) 0px, transparent 50%), 
        /* Фиолетовое свечение (снизу справа - перекликается с блоком автора) */
        radial-gradient(at 85% 85%, rgba(46, 11, 61, 0.25) 0px, transparent 50%), 
        /* Глубокий бирюзовый центр */
        radial-gradient(at 50% 50%, #052e2e 0px, transparent 60%);
        
    background-attachment: fixed; /* Фон зафиксирован, контент скользит поверх него */
    background-size: cover;
    /* ================================================== */

    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: 'Montserrat', sans-serif; }

/* КОНТЕЙНЕРЫ */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px; 
    position: relative;
}

/* ГЛОБАЛЬНЫЕ ОТСТУПЫ */
.main-offer, .hero-offer, .game-grid, .bonus-grid, .data-table-container, 
.app-download, .footer-column, .reg-steps, .testimonial, 
.author-box, .expert-rating-card, .faq-accordion, .limits-accordion,
.pros-cons, .bonus-calculator, .callout, .quick-deposit, 
.update-banner, .license-rich-card, .security-fairness, 
.awards-recognition, .evidence-box, .onboarding-simulator {
    width: 100%; 
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.app-download, .author-box, .reg-steps, .testimonial, 
.expert-rating-card, .callout, .quick-deposit, .license-rich-card,
.evidence-box, .security-fairness {
    max-width: 900px; 
}

/* ==========================================================================
   КНОПКИ
   ========================================================================== */
.button, .main-offer__cta-button, .app-download__button, 
.sticky-cta__button, .bonus-card-v2__cta, .game-grid__more-button,
.hero-offer__cta, .bonus-calculator__button, .onboarding-simulator__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: var(--btn-radius);
    
    font-weight: 800; 
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-align: center;
    background-color: var(--accent-primary);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(48, 90, 255, 0.25);
    white-space: nowrap;
}

.button:hover, .main-offer__cta-button:hover, .game-grid__more-button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.button--secondary {
    background: rgba(9, 41, 41, 0.6); 
    border: 1px solid var(--border-color);
    color: #fff !important;
    box-shadow: none;
}
.button--secondary:hover {
    background: var(--bg-surface);
    border-color: #fff;
}

.button--desktop-only { display: inline-flex; }

/* ==========================================================================
   ХЕДЕР (PREMIUM GLASSMORPHISM)
   ========================================================================== */
.main-header {
    /* Полупрозрачный черный фон для эффекта стекла */
    background: rgba(5, 15, 15, 0.75); 
    
    /* Размытие фона под хедером */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    
    /* Тонкая линия снизу */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0; 
    width: 100%;
    transition: all 0.3s ease;
}

/* Полная ширина фона, но контент в центре */
.main-header .container {
    max-width: 100%; 
    padding: 0 40px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; 
}

.main-header__logo { flex-shrink: 0; width: 140px; margin-right: 20px; }
.main-header__logo img { width: 100%; height: auto; }

/* Кнопка в хедере - Пульсация */
.main-header .button {
    box-shadow: 0 0 15px rgba(48, 90, 255, 0.4); 
    transition: all 0.3s ease;
}
.main-header .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(48, 90, 255, 0.7); 
}

/* Nav */
.main-nav { 
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.main-nav__list { display: flex; gap: 32px; align-items: center; justify-content: center; height: 100%; }
.main-nav__item { display: flex; align-items: center; height: 100%; }

/* Ссылки меню с эффектом подчеркивания */
.main-nav__link { 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase;
    color: #e2e8f0; /* Чуть мягче белого */
    display: flex; 
    align-items: center; 
    transition: all 0.3s ease;
    padding: 5px 0;
    position: relative;
    letter-spacing: 0.5px;
}

/* Зеленая линия при наведении */
.main-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--brand-green);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--brand-green);
}

.main-nav__link:hover { 
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.main-nav__link:hover::after {
    width: 100%;
}

/* Dropdown */
.main-nav__item--has-child { position: relative; }
.link-wrapper { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.menu-arrow { 
    display: inline-block; width: 0; height: 0; 
    border-left: 4px solid transparent; border-right: 4px solid transparent; 
    border-top: 4px solid var(--text-muted); margin-top: 2px; 
}
.main-nav__sublist {
    position: absolute; top: 100%; left: -15px; 
    background: var(--bg-surface); 
    border: 1px solid var(--border-color); 
    padding: 15px; border-radius: 8px;
    opacity: 0; visibility: hidden; transition: 0.2s; min-width: 200px;
    display: flex; flex-direction: column; gap: 10px; z-index: 1001; margin-top: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.main-nav__item--has-child:hover .main-nav__sublist { opacity: 1; visibility: visible; margin-top: 5px; }
.main-nav__sublink { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 5px; }
.main-nav__sublink:hover { color: var(--brand-green); }

.main-header__actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.main-header__burger { display: none; background: transparent; border: none; cursor: pointer; padding: 5px; }

/* ==========================================================================
   HERO / MAIN
   ========================================================================== */
.main-offer {
    text-align: center; padding: 60px 20px;
    background-color: var(--bg-surface); 
    border-radius: var(--block-radius); border: 1px solid var(--border-color);
    margin-top: 30px; display: flex; flex-direction: column; align-items: center;
}
.main-offer__logo { height: 50px; margin-bottom: 20px; width: auto; }
.main-offer__title { 
    font-size: 38px; font-weight: 900; color: #fff; 
    margin-bottom: 10px; text-transform: uppercase;
}
.main-offer__condition { font-size: 16px; color: var(--text-muted); margin-bottom: 30px; font-weight: 500; }
.main-offer__promo-code { margin-top: 15px; font-family: monospace; color: var(--brand-green); font-weight: bold; }

/* ==========================================================================
   HERO OFFER (CHROME ORIGINAL GAMES STYLE)
   ========================================================================== */
.hero-offer {
  text-align: center; 
  padding: 60px 20px;
  background-color: var(--bg-body);
  
  /* ГРАДИЕНТ "ORIGINAL GAMES" */
  background-image: linear-gradient(
      180deg, 
      #052e36 0%,       
      #02181c 40%,      
      #02181c 60%,      
      #291536 100%      
  );

  border-radius: var(--block-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(180, 240, 255, 0.3); 
  border-bottom-color: rgba(230, 180, 255, 0.3); 
  
  position: relative; 
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 20px 50px rgba(0,0,0,0.3);
}

.hero-offer__title { font-size: 36px; font-weight: 700; margin-bottom: 10px; color: #fff; font-style: italic; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-offer__subtitle { font-size: 22px; color: var(--text-muted); margin-bottom: 30px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }

.hero-offer__main-offer { 
    font-size: 52px; 
    font-weight: 900; 
    margin-bottom: 40px; 
    line-height: 1;
    background: linear-gradient(180deg, #dcfce7 0%, #00e380 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 227, 128, 0.4));
}
.hero-offer__cta { font-size: 18px; padding: 16px 40px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(48, 90, 255, 0.4); }
.hero-offer__features { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); }

/* ==========================================================================
   CARDS & GRIDS
   ========================================================================== */
.bonus-grid__title { text-align: center; font-size: 28px; font-weight: 800; margin-bottom: 30px; text-transform: uppercase; }
.bonus-grid__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

.bonus-card-v2 {
    background-color: var(--bg-surface); 
    border: 1px solid var(--border-color);
    border-radius: var(--block-radius); 
    padding: 24px;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    min-height: 320px; transition: 0.3s;
}
.bonus-card-v2:hover { transform: translateY(-5px); border-color: var(--accent-primary); }
.bonus-card-v2__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.bonus-card-v2__header { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; margin-bottom: 15px; }
.bonus-card-v2__title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: #fff; }
.bonus-card-v2__tags { display: flex; gap: 8px; }
.bonus-card-v2__tag { 
    background: rgba(48, 90, 255, 0.15); font-size: 11px; padding: 4px 8px; 
    border-radius: 4px; font-weight: 700; color: var(--accent-primary); text-transform: uppercase; 
}
.bonus-card-v2__offer { 
    font-size: 24px; font-weight: 800; color: var(--brand-green); margin-bottom: 20px; line-height: 1.3; 
}
.bonus-card-v2__cta { width: 100%; text-align: center; display: block; }
.bonus-card-v2__visual {
    position: absolute; top: 0; right: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0.05; display: flex; align-items: center; justify-content: center;
}
.bonus-card-v2__visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }

/* Games */
.game-grid { text-align: center; }
.game-grid__title { font-size: 26px; font-weight: 800; margin-bottom: 25px; color: #fff; text-transform: uppercase; }
.game-grid__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 30px; }
.game-card { background-color: var(--bg-surface); border-radius: 12px; overflow: hidden; position: relative; border: 1px solid transparent; transition: 0.3s; }
.game-card:hover { transform: translateY(-5px); border-color: var(--accent-primary); }
.game-card__image { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.game-card__title { padding: 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--bg-element); border-top: 1px solid var(--border-color); }
.game-card__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(9, 41, 41, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; opacity: 0; transition: 0.3s; }
.game-card:hover .game-card__overlay { opacity: 1; }
.game-card__button { padding: 8px 16px !important; font-size: 12px !important; min-width: 100px; margin: 0 !important; }

/* ==========================================================================
   RESTORED COMPONENTS
   ========================================================================== */
.reg-steps { display: flex; flex-direction: column; gap: 30px; }
.reg-steps__item { display: flex; align-items: flex-start; gap: 20px; }
.reg-steps__number {
    flex-shrink: 0; width: 45px; height: 45px; 
    background: var(--bg-element); border: 2px solid var(--accent-primary);
    color: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; 
}
.reg-steps__title { margin: 0 0 8px 0; font-size: 18px; color: #fff; font-weight: 800; text-transform: uppercase; }
.reg-steps__description { margin: 0; color: var(--text-muted); font-size: 14px; }
.reg-steps__highlight { color: var(--brand-green); font-weight: 700; }

.data-table-container { background-color: var(--bg-surface); padding: 30px; border-radius: var(--block-radius); border: 1px solid var(--border-color); margin-bottom: 50px; }
.data-table-container__title { font-size: 22px; color: #fff; margin-bottom: 20px; font-weight: 800; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 15px; background: var(--bg-element); color: var(--text-muted); font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.data-table td { padding: 15px; border-bottom: 1px solid var(--border-color); color: #fff; font-size: 14px; font-weight: 500; }
.promo-code { color: var(--brand-green); font-family: monospace; font-weight: 700; font-size: 15px; }

.expert-rating-card { background-color: var(--bg-surface); border-radius: var(--block-radius); padding: 30px; border: 1px solid var(--border-color); }
.expert-rating-card__main { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.expert-rating-card__score { font-size: 42px; font-weight: 900; color: var(--brand-green); }
.expert-rating-card__stars { color: var(--brand-green); font-size: 20px; }
.rating-item { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.rating-item__progress-bar { width: 100%; height: 8px; background-color: var(--bg-body); border-radius: 10px; overflow: hidden; }
.rating-item__progress { height: 100%; background-color: var(--accent-primary); border-radius: 10px; }

.author-box { background: var(--bg-surface); padding: 30px; border-radius: var(--block-radius); text-align: center; border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; }
.author-box__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-primary); margin-bottom: 15px; }
.author-box__name { font-size: 20px; font-weight: 700; color: #fff; }
.author-box__title { color: var(--accent-primary); font-size: 14px; margin-bottom: 10px; font-weight: 600; }
.author-box__bio { color: var(--text-muted); font-size: 14px; }

.faq-accordion, .limits-accordion { background: var(--bg-surface); padding: 30px; border-radius: var(--block-radius); border: 1px solid var(--border-color); }
.faq-accordion__title { font-size: 24px; color: #fff; border-left: 4px solid var(--accent-primary); padding-left: 15px; margin-bottom: 20px; font-weight: 800; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item:last-child { border-bottom: none; }
.faq-item__question { width: 100%; padding: 20px 0; font-size: 16px; font-weight: 700; text-align: left; background: none; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border: none; outline: none; }
.faq-item__question:hover { color: var(--brand-green); }
.faq-item__icon { color: var(--accent-primary); font-size: 24px; transition: transform 0.3s ease; }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-bottom 0.4s ease; color: var(--text-muted); padding-right: 20px; font-size: 15px; line-height: 1.7; font-weight: 500; }
.faq-item.is-open .faq-item__answer { max-height: 500px; padding-bottom: 20px; }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

.pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.pros-cons__title { font-size: 20px; margin-bottom: 15px; font-weight: 800; }
.pros-cons__column--pros .pros-cons__title { color: var(--brand-green); }
.pros-cons__column--cons .pros-cons__title { color: var(--color-error); }
.pros-cons__item { padding-left: 25px; position: relative; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
.pros-cons__item::before { position: absolute; left: 0; font-weight: bold; }
.pros-cons__column--pros .pros-cons__item::before { content: '✓'; color: var(--brand-green); }
.pros-cons__column--cons .pros-cons__item::before { content: '✗'; color: var(--color-error); }

.bonus-calculator { background: var(--bg-surface); padding: 30px; border-radius: var(--block-radius); border: 1px solid var(--border-color); }
.bonus-calculator__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.form-group input { width: 100%; background: var(--bg-element); border: 1px solid var(--border-color); padding: 12px; color: #fff; border-radius: 6px; font-weight: 600; }
.bonus-calculator__result { background: var(--bg-body); padding: 15px; text-align: center; border-radius: 8px; margin-top: 15px; }
#wagerAmount { color: var(--brand-green); font-weight: 800; font-size: 18px; }

.callout { background-color: var(--bg-surface); border-radius: 8px; padding: 20px; margin: 30px 0; border-left: 4px solid var(--accent-primary); display: flex; align-items: flex-start; gap: 20px; }
.callout__content p { margin: 0; color: var(--text-muted); font-size: 15px; }
.evidence-box, .update-banner { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 15px 25px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: 600; }
.evidence-box__icon, .update-banner__icon { color: var(--brand-green); font-weight: 800; font-size: 18px; }

.app-download { 
    width: 100%; max-width: 900px; margin: 50px auto !important;
    background-color: var(--bg-surface);
    padding: 50px 40px; 
    border-radius: 24px;
    border: 1px solid var(--border-color); 
    text-align: center; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.app-download__image { width: 80px; margin-bottom: 25px; }
.app-download__title { font-size: 32px; font-weight: 800; margin: 0 0 15px 0; color: #fff; }
.app-download__desc { font-size: 16px; color: var(--text-muted); max-width: 650px; margin: 0 0 35px 0; line-height: 1.6; }
.app-download__desc strong { color: #fff; }
.app-download__buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 25px; }
.app-download__button { min-width: 180px; font-size: 16px; height: 48px; }
.app-download__note { font-size: 14px; color: var(--text-muted); font-style: italic; }

.testimonial { background-color: var(--bg-surface); padding: 30px; border-radius: var(--block-radius); border: 1px solid var(--border-color); border-left: 4px solid var(--brand-green); margin-bottom: 40px; }
.testimonial__text { font-style: italic; color: var(--text-muted); font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.testimonial__highlight { color: #fff; text-decoration: underline; text-decoration-color: var(--brand-green); }
.testimonial__author { display: flex; align-items: center; gap: 15px; border-top: 1px solid var(--border-color); padding-top: 15px; }
.testimonial__name { color: #fff; font-weight: 700; font-size: 14px; }
.testimonial__rank { color: var(--brand-green); font-size: 12px; text-transform: uppercase; font-weight: 700; }

.responsible-gaming-block { background: var(--bg-surface); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); color: var(--text-muted); margin-bottom: 20px; }
.responsible-gaming-block__title { margin-top: 0; color: #fff; font-size: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.rg-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.rg-tool-card { background-color: var(--bg-element); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
.rg-tool-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; color: #fff; }
.rg-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--bg-element); padding: 15px; border-radius: 8px; gap: 15px; }
.rg-contact a { color: var(--accent-primary); font-weight: 800; }
.rg-badges { display: flex; gap: 10px; align-items: center; }
.rg-badge { background: #000; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #666; }

.provider-grid { background-color: var(--bg-surface); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 40px; text-align: center; }
.provider-grid__title { color: #fff; font-size: 20px; margin: 0 auto 25px auto; font-weight: 700; }
.provider-grid__logos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.provider-grid__item { background-color: var(--bg-element); color: var(--text-muted); padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color); font-weight: 600; font-size: 14px; transition: 0.2s; }
.provider-grid__item:hover { background-color: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }

.quick-deposit { background-color: var(--bg-surface); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.quick-deposit__title { color: #fff; margin-top: 0; margin-bottom: 20px; font-size: 18px; border-left: 3px solid var(--accent-primary); padding-left: 12px; font-weight: 700; }
.quick-deposit__item { background-color: var(--bg-element); color: #fff; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--border-color); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.license-rich-card { background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; margin-bottom: 30px; }
.license-header { display: flex; gap: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; }
.license-icon-box { background: rgba(0, 227, 128, 0.1); color: var(--brand-green); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; flex-shrink: 0; }
.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.security-item { background: var(--bg-element); padding: 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-color); }
.security-text strong { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.security-text span { font-size: 11px; color: var(--text-muted); }

.onboarding-simulator__form { display: flex; gap: 15px; align-items: flex-end; }
.onboarding-simulator__input-group { flex-grow: 1; }
.onboarding-simulator__input { width: 100%; background: var(--bg-element); border: 1px solid var(--border-color); padding: 12px; color: #fff; border-radius: 8px; }
.awards-recognition__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; text-align: center; }
.security-fairness { display: flex; flex-direction: column; gap: 20px; background: var(--bg-surface); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); }
.security-fairness__item { display: flex; align-items: center; gap: 15px; color: var(--text-muted); }

/* ==========================================================================
   FOOTER (FIXED COMPACT & CENTERED)
   ========================================================================== */
.main-footer {
    background-color: #010a0a;
    border-top: 1px solid rgba(0, 227, 128, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 227, 128, 0.05);
    
    /* Уменьшенные отступы для снижения высоты */
    padding-top: 30px;
    margin-top: 40px;
    padding-bottom: 20px;
    position: relative;
}

/* Меняем Grid на Flex Column для центрирования всего контента */
.main-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует всё по горизонтали */
    text-align: center;
    gap: 30px;
}

/* Логотип сайта по центру */
.footer-logo-section {
    margin-bottom: 10px;
}
.footer-logo-section img {
    width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0.9;
}

/* Секция ссылок и копирайта */
.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-links a {
    color: #8899a6;
    font-size: 13px;
    font-weight: 500;
    transition: 0.2s;
}
.footer-links a:hover {
    color: var(--brand-green);
}

/* Блок регуляторов (18+, GamBlock...) */
.footer-regulatory {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Расстояние между логотипами */
    flex-wrap: wrap;
    margin: 10px 0;
}
/* Единый размер и стиль ячеек */
.regulatory-icon {
    height: 40px; /* Фиксированная высота для симметрии */
    width: auto;  /* Ширина подстроится */
    object-fit: contain;
    opacity: 0.7;
    transition: 0.3s;
    filter: grayscale(100%); /* ЧБ стиль для аккуратности */
}
.regulatory-icon:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Блок платежных систем */
.footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.payment-icon {
    height: 32px; /* Фиксированная высота для всех лого оплат */
    width: auto;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

.main-footer__copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #445;
}

/* ==========================================================================
   MOBILE RESPONSIVE (FIXED HEADER & BUTTONS)
   ========================================================================== */
@media (max-width: 992px) {
    .main-nav { display: none; }
    
    /* --- ИСПРАВЛЕНИЕ ХЕДЕРА --- */
    
    /* 1. Показываем кнопку Логин (secondary) */
    .button--desktop-only { 
        display: inline-flex !important; /* Принудительно включаем */
    }

    /* 2. Настройка контейнера хедера для мобилок */
    .main-header .container {
        padding: 0 10px;
        justify-content: space-between;
        gap: 10px;
    }

    /* 3. Уменьшаем логотип, чтобы всё влезло */
    .main-header__logo { 
        width: 100px; /* Чуть меньше */
        margin-right: 0;
    }

    /* 4. Компактные кнопки для мобильной версии */
    .main-header__actions .button {
        padding: 8px 12px;     /* Меньше отступы */
        font-size: 11px;       /* Меньше шрифт */
        min-width: auto;       /* Убираем минимальную ширину */
        height: 36px;          /* Фиксируем высоту */
    }

    /* Бургер меню */
    .main-header__burger { 
        display: flex; flex-direction: column; gap: 4px; width: 28px; 
        background: transparent; border: none; padding: 0; cursor: pointer;
        margin-left: 5px;
    }
    .main-header__burger span { height: 2px; background: #fff; width: 100%; border-radius: 3px; }

    /* Футер на мобильном */
    .footer-regulatory { gap: 15px; }
    .footer-payments { gap: 10px; }
    
    /* Остальные мобильные стили */
    .game-grid__container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
    .game-card { min-width: 140px; scroll-snap-align: start; }
    
    .app-download__buttons { flex-direction: column; width: 100%; }
    .app-download__button { width: 100%; }
    .onboarding-simulator__form { flex-direction: column; align-items: stretch; }
}

@media (min-width: 993px) {
    .main-header__burger { display: none !important; }
    .sticky-cta { display: none; }
}

/* ==========================================================================
   MOBILE RESPONSIVE (FIXED)
   ========================================================================== */
@media (max-width: 992px) {
    .main-nav { display: none; }
    .button--desktop-only { display: none !important; }
    
    /* Уменьшаем хедер на мобильных */
    .main-header { padding: 12px 0; } 
    
    .main-header__burger { 
        display: flex; flex-direction: column; gap: 5px; width: 30px; margin-left: 10px; 
        background: transparent; border: none; padding: 0; cursor: pointer;
    }
    .main-header__burger span { height: 3px; background: #fff; width: 100%; border-radius: 3px; }

    /* Отступы на мобильном (возвращаем к стандарту) */
    .main-header .container { padding: 0 15px; }
    .main-header__logo { width: 110px; margin-right: auto; }
    .main-header__actions { gap: 10px; }
    
    .game-grid__container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
    .game-card { min-width: 150px; scroll-snap-align: start; }

    .main-footer .container { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-column:nth-child(2), .footer-column:nth-child(3) { text-align: center; }
    .footer-column:nth-child(3) .footer-column__payment-methods { justify-content: center; }
    
    .data-table thead { display: none; }
    .data-table tr { display: block; border: 1px solid var(--border-color); margin-bottom: 15px; border-radius: 8px; padding: 10px; }
    .data-table td { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .data-table td::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: 12px; }
    
    .sticky-cta { 
        position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-surface);
        border-top: 1px solid var(--accent-primary); padding: 15px; display: flex; 
        flex-direction: row; justify-content: space-between; align-items: center; z-index: 999;
    }
    
    .app-download__buttons { flex-direction: column; width: 100%; }
    .app-download__button { width: 100%; }
    
    .onboarding-simulator__form { flex-direction: column; align-items: stretch; }
}

@media (min-width: 993px) {
    .main-header__burger { display: none !important; }
    .sticky-cta { display: none; }
}

/* ==========================================================================
   SAVASPIN: PREMIUM STATIC BLOCKS (UPDATED TEXTURES & GRADIENTS)
   ========================================================================== */

/* --- 1. GAME CARDS FIX (Removing Black Bars) --- */
.game-card {
  position: relative;
  background-color: #071f1f; /* Цвет фона такой же, как у сайта, на всякий случай */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  /* Важно: убираем лишние отступы, которые создают "дыры" */
}

.game-card__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1; /* Принудительный квадрат */
  object-fit: cover; /* Картинка заполнит всю область без искажений */
  display: block;    /* Убирает нижний отступ, свойственный строчным элементам */
  margin: 0;
  padding: 0;
}

.game-card__title {
  /* Сделаем заголовок "парящим" поверх низа картинки, как на Netflix, 
     или отдельным блоком, но без зазоров */
  background: #0b3333;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}


/* --- 2. MAIN APP DOWNLOAD (Style: "Glassmorphism & Glow") --- */
.app-download {
  /* Глубокий градиент с синим отливом */
  background: linear-gradient(135deg, rgba(9, 41, 41, 0.95) 0%, rgba(5, 20, 20, 0.98) 100%);
  border: 1px solid rgba(48, 90, 255, 0.3); /* Синяя обводка */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

/* Эффект "северного сияния" на фоне */
.app-download::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(48, 90, 255, 0.15) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.app-download__content { position: relative; z-index: 1; }


/* --- 3. BONUS GRID & CARDS (Style: "Premium Metal") --- */
.bonus-grid__container { gap: 24px; }

.bonus-card-v2 {
  /* Матовый металлический эффект */
  background: linear-gradient(180deg, #0e3b3b 0%, #092929 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.bonus-card-v2:hover {
  transform: translateY(-5px);
  /* При наведении - легкая зеленая подсветка границ */
  border-color: var(--brand-green);
  box-shadow: 0 10px 30px rgba(0, 227, 128, 0.15);
}

.bonus-card-v2__offer {
  text-shadow: 0 0 20px rgba(0, 227, 128, 0.4); /* Неоновое свечение текста */
}


/* --- 4. DATA TABLES (Style: "Tech Dashboard") --- */
.data-table-container {
  /* Темный, плоский, технический фон */
  background: #051a1a;
  border: 1px solid #1a4f4f;
  border-radius: 16px;
  overflow: hidden;
}

.data-table th {
  background: #082424; /* Чуть светлее фона */
  color: var(--brand-green);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  border-bottom: 2px solid #1a4f4f;
}

.data-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(0, 227, 128, 0.03); }


/* --- 5. REGISTRATION STEPS (Style: "Cards on Surface") --- */
.reg-steps__item {
  /* Эффект "карточки" приподнятой над поверхностью */
  background: #0d2e2e; 
  border: 1px solid transparent;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.reg-steps__item:hover {
  background: linear-gradient(145deg, #0d2e2e 0%, #113838 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Номер шага с градиентом */
.reg-steps__number {
  background: linear-gradient(135deg, var(--bg-body) 0%, #061818 100%);
  border: 2px solid var(--brand-green);
  color: var(--brand-green);
  box-shadow: 0 0 15px rgba(0, 227, 128, 0.2);
}


/* --- 6. PROVIDER GRID (Style: "Inset / Engraved") --- */
.provider-grid {
  /* Эффект "вдавленности" */
  background-color: #061818;
  border: 1px solid #123f3f;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5); 
}

.provider-grid__item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #a4b5b8;
}

.provider-grid__item:hover {
  background: var(--brand-green);
  color: #000;
  border-color: var(--brand-green);
  box-shadow: 0 0 20px rgba(0, 227, 128, 0.4);
}


/* --- 7. QUICK DEPOSIT (Style: "Clean Pills") --- */
.quick-deposit {
  background: transparent; /* Убираем тяжелый фон */
  border: 1px dashed rgba(255, 255, 255, 0.15); /* Пунктирная граница */
}

.quick-deposit__title {
  border-left: none; /* Убираем полоску слева */
  text-align: center;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1.5px;
}

.quick-deposit__grid { 
  display: flex;
  flex-direction: column; /* Выстраиваем в колонку */
  align-items: center;    /* Центрируем сами плашки по центру контейнера */
  gap: 12px;
}

.quick-deposit__item {
  background: #0b3333;
  border: 1px solid #1a4f4f;
  color: #fff;
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50px;
  padding: 14px 25px;
  font-size: 15px;
  letter-spacing: 0.5px;
}


/* --- 8. LICENSE & SECURITY (Style: "Official Document") --- */
.license-rich-card {
  /* Градиент от темно-зеленого к черному */
  background: linear-gradient(120deg, #051a1a 0%, #092e2e 100%);
  border: 1px solid #1a4f4f;
  position: relative;
}

/* Декоративная полоса сверху */
.license-rich-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand-green), transparent);
}

.security-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}


/* --- 9. RESPONSIBLE GAMING (Style: "Cautionary / Matte") --- */
.responsible-gaming-block {
  background: #1a1a1a; /* Чистый темно-серый, отличается от тила */
  border: 1px solid #333;
}
.responsible-gaming-block__title { border-bottom-color: #333; }
.rg-tool-card {
  background: #222; /* Еще чуть светлее */
  border: none;
}


/* --- 10. TESTIMONIAL (Style: "Spotlight Quote") --- */
.testimonial {
  /* Радиальный градиент, как будто свет падает в центр */
  background: radial-gradient(circle at 50% 0%, #134040 0%, #071f1f 100%);
  border: 1px solid #1a4f4f;
  border-left: 4px solid var(--brand-green);
}
.testimonial__rating { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }


/* --- 11. FAQ ACCORDION (Style: "Interactive List") --- */
.faq-accordion {
  background: var(--bg-surface);
  border: none;
}
.faq-item {
  background: #0b3333;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 20px;
}
.faq-item:hover {
  border-color: rgba(255,255,255,0.1);
}
.faq-item__question { padding: 15px 0; }
.faq-item.is-open { background: #0e3b3b; }


/* --- 12. UPDATE BANNER (Style: "System Notification") --- */
.update-banner {
  background: rgba(0, 227, 128, 0.1);
  border: 1px solid rgba(0, 227, 128, 0.3);
  box-shadow: 0 0 15px rgba(0, 227, 128, 0.1) inset;
  border-radius: 50px; /* Полностью круглые края */
}

/* ==========================================================================
   SAVASPIN: ALIGNMENT & GEOMETRY FIXES
   (Registration Steps)
   ========================================================================== */

/* --- REGISTRATION STEPS (Symmetry, alignment & Rounded Corners) --- */
.reg-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reg-steps__item {
  display: flex;
  flex-direction: row;    /* Оставляем горизонтальное расположение */
  align-items: center;    /* ГЛАВНОЕ: Выравнивает цифру и текст по вертикальному центру */
  justify-content: flex-start;
  
  /* Фон и геометрия */
  background: linear-gradient(145deg, #0d2e2e 0%, #071f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;    /* Сильное закругление краев, как просили */
  padding: 25px 30px;
  
  /* Тени для объема */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.reg-steps__item:hover {
  transform: translateY(-3px);
  border-color: var(--brand-green);
}

.reg-steps__number {
  flex-shrink: 0;         /* Запрещаем цифре сжиматься */
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin-right: 25px;     /* Отступ от цифры до текста */
  
  /* Обновленный стиль цифры */
  background: transparent;
  border: 2px solid var(--brand-green);
  color: var(--brand-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 227, 128, 0.1);
}

.reg-steps__content {
  flex-grow: 1;           /* Текст занимает все свободное место */
  text-align: center;     /* Центрируем текст симметрично */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reg-steps__title {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reg-steps__description {
  margin: 0;
  color: #a4b5b8;
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;        /* Чтобы текст использовал всю ширину для центровки */
}

/* Адаптив для мобильных (чтобы на телефоне выглядело так же хорошо) */
@media (max-width: 600px) {
  .reg-steps__item {
    flex-direction: column; /* На телефоне ставим цифру над текстом */
    text-align: center;
    padding: 20px;
    border-radius: 16px;
  }
  
  .reg-steps__number {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* ========================================= */
/* Стили для блока автора (Gradient Premium) */
/* ========================================= */

/* Анимация перелива градиента */
@keyframes gradientShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.author-block-container {
  display: flex;
  align-items: center;
  gap: 30px;
  
  /* ГРАДИЕНТНЫЙ ФОН */
  /* Цвета: от Темно-зеленого (как фон сайта) к Глубокому Фиолетовому */
  background: linear-gradient(125deg, #021a1a, #2e0b3d, #021a1a); 
  background-size: 200% 200%; /* Увеличиваем фон для анимации */
  animation: gradientShimmer 6s ease infinite; /* Плавный перелив */
  
  border-radius: 20px;
  /* Тонкая полупрозрачная рамка для эффекта "стекла" */
  border: 1px solid rgba(255, 255, 255, 0.1); 
  
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); /* Тень стала темнее */
  padding: 40px;
  box-sizing: border-box;
  margin: 40px 0;
  width: 100%;
  
  font-family: 'Montserrat', 'Roboto', sans-serif;
  color: #ffffff; /* Весь текст по умолчанию белый */
}

.author-avatar img {
  width: 130px; 
  height: 130px;
  min-width: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2); /* Рамка вокруг фото */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: block;
}

.author-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Новое: Имя автора */
.author-name {
  font-size: 1.8rem; /* Крупный размер */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 5px;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Легкая тень текста */
}

/* Должность */
.author-role {
  font-weight: 600;
  font-size: 0.95rem; 
  /* Светло-зеленый акцент (под логотип savaspin) */
  color: #4ade80; 
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Описание */
.author-bio {
  font-size: 1rem;
  line-height: 1.6;
  color: #e2e8f0; /* Светло-серый, почти белый, для читаемости */
  text-align: left;
  margin: 0;
  font-weight: 300;
}

/* Мобильная версия */
@media (max-width: 768px) {
  .author-block-container {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  .author-bio {
    text-align: center;
  }
}

/* ==========================================================================
   FOOTER (FIXED & CENTERED)
   ========================================================================== */
.main-footer {
    background-color: #010a0a;
    border-top: 1px solid rgba(0, 227, 128, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 227, 128, 0.05);
    padding-top: 50px;
    padding-bottom: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 10;
}

/* Контейнер: все выстраиваем в колонку по центру */
.main-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center;
    gap: 25px; /* Отступы между этажами (Лого -> Текст -> Кнопки) */
}

/* Общие стили для блоков футера */
.footer-centered-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

/* 1. Логотип */
.logo-block img {
    width: 160px; /* Оптимальный размер логотипа */
    height: auto;
    display: block;
}

/* 2. Предупреждение */
.warning-block p {
    color: #a4b5b8;
    font-size: 14px;
    margin: 0;
}

/* 3. Регуляторы (кнопки) */
.regulatory-block {
    gap: 15px; /* Расстояние между кнопками */
}

.trust-seal {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 42px; /* Единая высота */
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #a4b5b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Красная кнопка 18+ */
.trust-seal.box-18 {
    color: #ff3045;
    border-color: rgba(255, 48, 69, 0.3);
    min-width: 50px; /* Квадратная форма для 18+ */
    padding: 0 15px;
}

/* 4. Ссылки */
.links-block {
    gap: 25px;
    margin: 10px 0;
}
.links-block a {
    color: #8899a6;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
}
.links-block a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 5. Платежные методы (SVG) */
.payments-block {
    gap: 20px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Тонкая линия разделитель */
    margin-top: 5px;
}

.payments-block img {
    height: 28px; /* Фиксированная высота для SVG */
    width: auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.payments-block img:hover {
    opacity: 1;
}

/* Копирайт */
.main-footer__copyright {
    margin-top: 15px;
    font-size: 12px;
    color: #445;
    text-align: center;
}

/* ==========================================================================
   MOBILE FIXES (IMPORTANT)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* --- ХЕДЕР: Кнопка Логин видна --- */
    .button--desktop-only { display: inline-flex !important; }
    .main-header__actions { gap: 8px; }
    .main-header .button { padding: 0 12px; height: 38px; font-size: 11px; min-width: auto; }
    .main-header__logo { width: 110px; margin-right: auto; }

    /* --- ФУТЕР: Исправление видимости логотипов --- */
    .main-footer {
        /* ОГРОМНЫЙ ОТСТУП СНИЗУ, чтобы перебить синюю кнопку "Richiedi Bonus" */
        padding-bottom: 140px !important; 
    }
    
    .footer-centered-block {
        flex-direction: row; /* Оставляем в ряд, если влезают */
        flex-wrap: wrap;
    }
    
    .regulatory-block {
        justify-content: center;
    }
    
    /* Ссылки на мобайле можно сделать компактнее */
    .links-block {
        gap: 15px;
        font-size: 12px;
    }
    
    /* Логотипы оплаты на мобайле чуть меньше */
    .payments-block img {
        height: 24px; 
        margin: 5px;
    }
}

/* ==========================================================================
   FOOTER PROVIDERS GRID
   ========================================================================== */

/* Контейнер сетки */
.providers-grid {
    display: grid;
    /* На десктопе: 6 равных колонок */
    grid-template-columns: repeat(6, 1fr); 
    gap: 12px; /* Расстояние между ячейками */
    width: 100%;
    max-width: 800px; /* Ограничиваем ширину, чтобы не растягивало на весь 4к монитор */
    margin: 20px 0; /* Отступ сверху и снизу */
}

/* Сами ячейки (контейнеры) */
.provider-box {
    background-color: rgba(255, 255, 255, 0.05); /* Темная подложка */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    height: 50px; /* Фиксированная высота для симметрии */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ВАЖНО: Обрезает края увеличенной картинки */
    position: relative;
    transition: border-color 0.3s ease;
}

.provider-box:hover {
    border-color: var(--brand-green);
}

/* Картинки внутри */
.provider-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Картинка вписывается в блок */
    /* ВАЖНО: Увеличиваем на 12%, чтобы скрыть кривые края скриншота */
    transform: scale(1.12); 
    display: block;
}


/* ==========================================================================
   MOBILE FIXES (UPDATED)
   ========================================================================== */
@media (max-width: 992px) {
    /* ... (твои старые стили хедера) ... */

    .main-footer {
        /* Огромный отступ снизу для мобильной кнопки бонуса */
        padding-bottom: 150px !important; 
    }

    /* Адаптация сетки провайдеров для мобильника */
    .providers-grid {
        /* На мобильном: 3 колонки в 2 ряда. 
           6 в ряд будет слишком мелко. 3x2 выглядит идеально. */
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px;
        max-width: 100%; /* На мобильном на всю ширину */
    }

    /* Чуть уменьшим высоту ячейки на мобильном, если нужно, или оставим 50px */
    .provider-box {
        height: 45px; 
    }
}

/* ==========================================================================
   УЛУЧШЕННЫЙ ПРИЛИПАЮЩИЙ БАННЕР (НОВАЯ ВЕРСИЯ)
   ========================================================================== */

/* Анимация для градиента */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Анимация для пульсирующего свечения кнопки */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 15px rgba(48, 90, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(48, 90, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 15px rgba(48, 90, 255, 0.4);
  }
}

.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    /* --- ФОН: Яркий и динамичный --- */
    background: linear-gradient(-45deg, #305aff, #00e380, #2546cc, #071f1f);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;

    /* --- Эффект "стекломорфизма" --- */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(9, 41, 41, 0.8); /* Запасной вариант для старых браузеров */

    /* --- РАМКИ И ТЕНИ для придания объема --- */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);

    /* --- РАСПОЛОЖЕНИЕ И ОТСТУПЫ --- */
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* --- СТИЛИ ТЕКСТА --- */
.sticky-cta__text-content {
    display: flex;
    flex-direction: column;
}

.sticky-cta__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 4px 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.sticky-cta__offer {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

/* --- СТИЛИ КНОПКИ --- */
.sticky-cta__button {
    flex-shrink: 0; /* Запрещает кнопке сжиматься на маленьких экранах */
    padding: 14px 32px;
    
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    
    background-color: var(--accent-primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;

    /* --- Эффект "дышащего" свечения --- */
    animation: pulse-glow 3s infinite;
    
    transition: all 0.3s ease;
}

.sticky-cta__button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px) scale(1.05); /* Приподнимает и увеличивает кнопку */
    box-shadow: 0 10px 30px rgba(48, 90, 255, 0.6) !important; /* Более яркая тень при наведении */
}

/* --- АДАПТАЦИЯ для маленьких экранов --- */
@media (max-width: 480px) {
    .sticky-cta {
        flex-direction: column; /* Элементы в столбик */
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .sticky-cta__offer {
        font-size: 20px;
    }

    .sticky-cta__button {
        width: 100%; /* Кнопка на всю ширину */
        padding: 16px;
        font-size: 15px;
    }
}

/* ==========================================================================
   СТИЛИ ДЛЯ ПРЕМИУМ-КАРТОЧЕК БОНУСОВ
   ========================================================================== */

/* Контейнер для карточек, чтобы они красиво располагались */
.bonus-cards-container {
    display: grid;
    grid-template-columns: 1fr; /* Одна карточка в ряд */
    gap: 24px; /* Расстояние между карточками */
    max-width: 600px; /* Ограничим ширину для лучшего вида */
    margin: 40px auto;
}

/* Основной стиль карточки */
.premium-bonus-card {
    /* Фон: эффект матового металла с градиентом */
    background: linear-gradient(165deg, #0e3b3b 0%, #092929 100%);
    
    border-radius: 16px; /* Более плавное скругление */
    
    /* Рамка: тонкая, полупрозрачная, с градиентной подсветкой */
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    
    padding: 24px 30px;
    
    /* Тень для объема */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между секциями внутри карточки */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Градиентная рамка */
.premium-bonus-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -1px; /* Располагаем под основной рамкой */
    border-radius: inherit; /* Наследуем скругление */
    background: linear-gradient(165deg, rgba(0, 227, 128, 0.2), rgba(9, 41, 41, 0.2));
    transition: background 0.3s ease;
}


/* Эффект при наведении */
.premium-bonus-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 227, 128, 0.15);
}
.premium-bonus-card:hover::before {
    background: linear-gradient(165deg, var(--brand-green), var(--accent-primary));
}

/* --- Секции внутри карточки --- */

/* Общий стиль для маленьких подписей (лейблов) */
.pbc-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

/* 1. Заголовок (Название бонуса) */
.pbc-header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
.pbc-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

/* 2. Тело (Главное предложение) */
.pbc-body {
    text-align: center;
}
.pbc-offer {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;

    /* Градиентный текст с неоновым свечением */
    background: linear-gradient(180deg, #dcfce7 0%, #00e380 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 227, 128, 0.4));
}

/* 3. Футер (Детали) */
.pbc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}
.pbc-detail {
    text-align: center;
    flex-basis: 50%; /* Равномерно делим пространство */
}
.pbc-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* Стиль для "чипа" с промокодом */
.pbc-promo-code {
    display: inline-block;
    background-color: var(--bg-element);
    border: 1px dashed var(--brand-green);
    border-radius: 6px;
    padding: 6px 14px;
}

.pbc-promo-code span {
    color: var(--brand-green);
    font-family: 'Montserrat', monospace; /* Используем ваш основной шрифт */
    font-weight: 700;
    font-size: 16px;
}```