.hub-selection { padding: 80px 0; }
.hub-header { text-align: center; margin-bottom: 60px; }

.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.hub-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 50px 40px;
    border-radius: 40px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    
    /* Добавляем эти три строки: */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Эффект свечения для разных сторон */
.company-side:hover { border-color: var(--accent-blue); box-shadow: 0 0 30px rgba(74, 144, 226, 0.1); }
.accountant-side:hover { border-color: var(--accent-gold); box-shadow: 0 0 30px rgba(212, 175, 55, 0.1); }

.hub-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #fff, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.company-side .hub-icon { background: linear-gradient(135deg, var(--accent-blue), #fff); -webkit-background-clip: text;}
.accountant-side .hub-icon { background: linear-gradient(135deg, var(--accent-gold), #fff); -webkit-background-clip: text;}

.hub-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 40px;
    text-align: left;
    display: inline-block;
}

.hub-list li {
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.hub-list li i {
    color: var(--accent-emerald);
    margin-right: 10px;
}

/* Адаптив */
@media (max-width: 992px) {
    .hub-grid { grid-template-columns: 1fr; }
}
/* Базовые сбросы для всех кнопок */
.btn-17, .btn-buh, .btn-comp,
.btn-17 *, .btn-buh *, .btn-comp *,
.btn-17 :after, .btn-buh :after, .btn-comp :after,
.btn-17 :before, .btn-buh :before, .btn-comp :before,
.btn-17:after, .btn-buh:after, .btn-comp:after,
.btn-17:before, .btn-buh:before, .btn-comp:before {
  border: 0 solid;
  box-sizing: border-box;
}

/* Основные стили кнопок */
.btn-17, .btn-buh, .btn-comp {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #d4af37;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #d4af37);
  padding: 0.8rem 3rem;
  text-transform: uppercase;
  border-radius: 99rem;
  border-width: 2px;
  z-index: 0;
  overflow: hidden;
  position: relative;
}

.btn-17:disabled, .btn-buh:disabled, .btn-comp:disabled {
  cursor: default;
}

.btn-17:-moz-focusring, .btn-buh:-moz-focusring, .btn-comp:-moz-focusring {
  outline: auto;
}

.btn-17 svg, .btn-buh svg, .btn-comp svg {
  display: block;
  vertical-align: middle;
}

.btn-17 [hidden], .btn-buh [hidden], .btn-comp [hidden] {
  display: none;
}

/* Стили контейнера текста и анимация */
.btn-17 .text-container, .btn-buh .text-container, .btn-comp .text-container {
  overflow: hidden;
  position: relative;
  display: block;
  mix-blend-mode: difference;
}

.btn-17 .text, .btn-buh .text, .btn-comp .text {
  display: block;
  position: relative;
}

/* Ховер-эффект текста */
.btn-17:hover .text, .btn-buh:hover .text, .btn-comp:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}

/* Псевдоэлементы (эффект раскрытия фона) */
.btn-17:after, .btn-buh:after, .btn-comp:after,
.btn-17:before, .btn-buh:before, .btn-comp:before {
  --skew: 0.2;
  background: #d4af37;
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.btn-17:after, .btn-buh:after, .btn-comp:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: -1;
}

.btn-17:hover:before, .btn-buh:hover:before, .btn-comp:hover:before {
  --progress: 100%;
}

.btn-17:hover:after, .btn-buh:hover:after, .btn-comp:hover:after {
  --progress: -102%;
}

/* Анимация keyframes остается без изменений */
@keyframes move-up-alternate {
  0% { transform: translateY(0); }
  50% { transform: translateY(80%); }
  51% { transform: translateY(-80%); }
  to { transform: translateY(0); }
}

/* --- 1. СТИЛИ ДЛЯ ХАБА (Выбор ролей) --- */
.hub-selection { 
    padding: 80px 0; 
}

.hub-header { 
    text-align: center; 
    margin-bottom: 60px; 
}

.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.hub-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 50px 40px;
    border-radius: 40px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hub-card:hover {
    transform: translateY(-10px);
}

.company-side:hover { border-color: var(--accent-blue); box-shadow: 0 15px 35px rgba(74, 144, 226, 0.1); }
.accountant-side:hover { border-color: var(--accent-gold); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1); }

.hub-icon {
    font-size: 4rem;
    margin-bottom: 25px;
}

.hub-card h2 { margin: 0 0 15px; font-size: 1.8rem; color: #fff; }

.hub-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 40px;
    text-align: left;
    display: inline-block;
    flex-grow: 1; /* Толкает кнопку вниз */
}

.hub-list li { margin-bottom: 12px; color: var(--text-muted); font-size: 0.95rem; }
.hub-list li i { color: var(--accent-emerald); margin-right: 10px; }

/* Принудительный отступ для кнопок в карточках */
.hub-card .btn-buh, 
.hub-card .btn-comp {
    margin-top: auto;
    align-self: center;
}

/* --- 2. МОДАЛЬНЫЕ ОКНА (ОБЩЕЕ) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: #151515;
    border: 1px solid var(--accent-gold);
    border-radius: 25px;
    position: relative;
    transform: translateY(30px);
    transition: all 0.4s ease;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.modal-overlay.active .modal-card { transform: translateY(0); }

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}

/* --- 3. БОЛЬШАЯ АНКЕТА РЕГИСТРАЦИИ (БЕЗ НАЕЗДОВ ПОЛЕЙ) --- */
.modal-large {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 50px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.section-subtitle-mini {
    color: var(--accent-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

/* ИСПРАВЛЕННАЯ СЕТКА ПОЛЕЙ */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ровно две колонки */
    gap: 15px 20px; /* Отступы между полями */
    width: 100%;
}

.form-group {
    width: 100%; 
}

.form-double {
    width: 95%;
}

.full-width {
    grid-column: span 2; /* Растягивает на всю ширину */
}

.registration-form input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.registration-form input:focus {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.07);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 992px) {
    .hub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .modal-large { padding: 40px 20px; }
    .form-grid { grid-template-columns: 1fr; } /* На мобилках всё в одну колонку */
    .full-width { grid-column: span 1; }
    .hub-card { padding: 40px 25px; }
}