:root{scrollbar-gutter: stable both-edges}
html{height:100%;overflow-x:hidden; background:radial-gradient(1200px 800px at -10% -10%, #1b1e2d 0%, transparent 60%),radial-gradient(1000px 800px at 110% 0%, #151a2b 0%, transparent 60%),radial-gradient(1200px 800px at 50% 120%, #171b2a 0%, transparent 60%),var(--bg); background-attachment:fixed,fixed,fixed,fixed; background-repeat:no-repeat; background-size:cover}
body{max-width:100vw;overflow-x:visible;position:relative;overflow:visible}
:root{
  --bg: #0e0f14;
  --card: #131521;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --text: #e8ebf7;
  --muted: #a6accd;
  --accent: #7aa2ff;
  --accent-2: #9a7aff;
  --ring: rgba(122,162,255,0.45);
  --workA:#7aa2ff; /* цвет по умолчанию для сетки работ */
  --workB:#9a7aff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:transparent
}

/* Глобальный бэкдроп поверх всего контента (кроме панели меню) */
.page-backdrop{display:none}
.page-backdrop.active{display:none}
.smooth{scroll-behavior:smooth}
.container{width:min(1120px, 92vw); margin:0 auto; overflow:visible; padding:0 20px}
.header{display:flex; align-items:center; justify-content:space-between; padding:20px 0}

.header__left{display:flex; align-items:center; gap:32px}
.header__brand{font-weight:700; letter-spacing:0.02em; font-size:24px; color:var(--text)}

.nav{display:flex; gap:24px; align-items:center}
.nav--right{justify-content:flex-end}
.nav a{color:var(--text); text-decoration:none; font-weight:500; font-size:16px; letter-spacing:0.05em; transition:all 0.3s ease; transform:translateZ(0); padding:8px 0}
.nav a:hover{color:var(--accent); transform:translateY(-1px)}
.nav a:active{transform:translateY(0) scale(0.98)}

.header__mode{display:flex; align-items:center; visibility:visible !important; opacity:1 !important}

.mode-toggle{
  display: flex;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 4px;
  gap: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.mode-btn{
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.mode-btn:hover{
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

.mode-btn.selected{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0e17;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(122,162,255,0.3);
}

.mode-btn:active{
  transform: scale(0.98);
}

.hero{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; padding:120px 0 56px; overflow:visible}

.hero__title-container {
  margin-bottom: 24px;
}

.hero__title-main {
  font-size: 64px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1;
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__title-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__title-prefix {
  font-size: 24px;
  color: var(--muted);
  font-weight: 400;
}

.hero__mode-toggle {
  display: flex;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 4px;
  gap: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hero__mode-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hero__mode-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

.hero__mode-btn.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0e17;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(122,162,255,0.3);
}

.hero__mode-btn:active {
  transform: scale(0.98);
}

.hero__content p{margin:0 0 20px; color:var(--muted)}
.hero__actions{display:flex; gap:16px; justify-content:flex-start; overflow:visible; padding:20px; margin:-20px}
.hero__actions .button{transition:all 0.3s ease !important; transform:translateZ(0) !important}
.hero__actions .button:hover{transform:translateY(-2px) !important; box-shadow:0 8px 25px rgba(122,162,255,0.3) !important}
.hero__actions .button:active{transform:translateY(0) scale(0.98) !important}
.button{display:inline-block; padding:16px 32px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0e17; font-weight:600; text-decoration:none; transition:all 0.3s ease; transform:translateZ(0); cursor:pointer; font-size:16px; position:relative; z-index:1}
.button:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(122,162,255,0.3), 0 0 30px rgba(122,162,255,0.4), 0 0 60px rgba(122,162,255,0.2)}
.button:active{transform:translateY(0) scale(0.98)}

.button--primary{
  padding: 20px 40px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0e17;
  box-shadow: 0 8px 32px rgba(122,162,255,0.3);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.button--primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.button--primary:hover::before{
  left: 100%;
}

.button--primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 40px rgba(122,162,255,0.4), 0 0 50px rgba(122,162,255,0.3);
}

.button--primary:active{
  transform: translateY(-1px) scale(0.98);
}

.button__text{
  position: relative;
  z-index: 2;
}

.button__icon{
  position: relative;
  z-index: 2;
  margin-left: 8px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.button--primary:hover .button__icon{
  transform: translateX(4px);
}
.link{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.25); transition:all 0.3s ease; transform:translateZ(0); cursor:pointer; position:relative; padding:8px 16px; border-radius:8px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-bottom:1px dashed rgba(255,255,255,0.25)}
.link:hover{color:var(--accent); border-bottom-color:var(--accent); transform:translateY(-1px); background:rgba(122,162,255,0.08); border-color:rgba(122,162,255,0.2); box-shadow:0 4px 12px rgba(122,162,255,0.15)}
.link:active{transform:translateY(0) scale(0.98)}

.hero__preview{position:relative; min-height:280px; overflow:hidden; contain:paint}

/* FAQ секция */
.faq__list {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.faq__item:last-child {
  margin-bottom: 0;
}

.faq__item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(122,162,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.faq__question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
}

.faq__question:hover {
  background: rgba(255,255,255,0.02);
}

.faq__question span {
  flex: 1;
  margin-right: 16px;
}

.faq__icon {
  transition: transform 0.3s ease;
  color: var(--accent);
  flex-shrink: 0;
}

.faq__item.active .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: rgba(255,255,255,0.02);
}

.faq__item.active .faq__answer {
  max-height: 200px;
}

.faq__answer p {
  padding: 0 24px 20px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.card{position:absolute; inset:auto; width:78%; height:220px; border-radius:18px; background:var(--glass); border:1px solid rgba(255,255,255,0.12); box-shadow:0 20px 60px rgba(0,0,0,0.45); will-change:transform}
.card--glass{right:0; top:10%}
.card--ghost{left:6%; bottom:0; width:62%; height:170px; opacity:.6}

.section{padding:52px 0; overflow:visible}
.section__head{display:flex; justify-content:space-between; align-items:end; margin-bottom:20px}
.section__head h2{margin:0; font-size:28px}
.section__head p{margin:0; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; overflow:visible; padding:20px 0}
.tile{position:relative; aspect-ratio:1/1; border-radius:16px; background:radial-gradient(180px 120px at 30% 20%, color-mix(in srgb, var(--workA) 35%, transparent), transparent 60%), #141724; border:1px solid rgba(255,255,255,0.06); transition:transform .25s ease, box-shadow .25s ease, background .35s ease}
.tile::after{content:attr(data-label); position:absolute; left:12px; bottom:10px; color:var(--muted); font-size:12px; letter-spacing:.06em; opacity:.85}
.tile:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25)}

/* режимы для сетки работ */
body[data-mode="tattoo"]{ --workA:#ff8aa6; --workB:#ffae7a; }
body[data-mode="piercing"]{ --workA:#7aa2ff; --workB:#9a7aff; }

/* анимация обновления сетки при переключении режима */
.grid.animate .tile{animation: gridPop .28s ease both}
.grid.animate .tile:nth-child(2){animation-delay:.03s}
.grid.animate .tile:nth-child(3){animation-delay:.06s}
.grid.animate .tile:nth-child(4){animation-delay:.09s}
.grid.animate .tile:nth-child(5){animation-delay:.12s}
.grid.animate .tile:nth-child(6){animation-delay:.15s}

@keyframes gridPop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

/* Новая секция записи */
.booking__wrapper{display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; align-items:start}
.booking__content{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:40px}
.booking__header{margin-bottom:32px}
.booking__subtitle{color:var(--muted); margin-top:8px; font-size:16px}

.booking__form{display:flex; flex-direction:column; gap:24px}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.form__field{display:flex; flex-direction:column; gap:8px}
.form__field--full{grid-column:1/-1}
.form__label{color:var(--text); font-weight:500; font-size:14px; margin-bottom:4px}
.form__input{width:100%; padding:16px 20px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); color:var(--text); font-size:16px; transition:none; transform:translateZ(0); text-align:left}
.form__input:focus{outline:none; border-color:rgba(255,255,255,0.08); box-shadow:none; background:rgba(255,255,255,0.02)}
.form__input:hover:not(:focus){border-color:rgba(255,255,255,0.08); background:rgba(255,255,255,0.02)}

/* Специальные стили для date */
.form__input[type="date"] {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a6accd' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  padding-left: 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: left;
}

/* Убираем стрелочки с select элементов */
select.form__input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-right: 20px;
}

/* Убираем стрелочки с кнопок переключателя */
.service-btn {
  background-image: none !important;
  padding-right: 14px !important;
}

.form__input[type="date"]:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a6accd' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Дополнительные стили для поля даты */
.form__input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form__input[type="date"]::-webkit-datetime-edit {
  color: var(--text);
}

.form__input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text);
}

/* Стили для способа связи */
.contact-method {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.contact-option {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.contact-option:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

.contact-option.selected {
  background: rgba(122,162,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.contact-username-field {
  margin-top: 12px;
}

/* Кастомный календарь */
.custom-date-picker {
  position: relative;
}

.date-picker-calendar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 300px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 1000;
  display: none;
}

.date-picker-calendar.open {
  display: block;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-nav {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.calendar-nav:hover {
  background: rgba(255,255,255,0.1);
}

.calendar-month-year {
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
}

.calendar-mode-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.mode-toggle-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mode-toggle-btn.active {
  background: var(--accent);
  color: #0b0e17;
  border-color: var(--accent);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.weekday {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.calendar-day:hover {
  background: rgba(255,255,255,0.05);
}

.calendar-day.disabled {
  color: var(--muted);
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-day.disabled:hover {
  background: transparent;
}

.calendar-day.selected {
  background: var(--accent);
  color: #0b0e17;
  font-weight: 600;
}

.calendar-day.today {
  background: rgba(122,162,255,0.2);
  color: var(--accent);
}

/* Компактный режим календаря */
.date-picker-calendar.compact .calendar-weekdays {
  display: none;
}

.date-picker-calendar.compact .calendar-days {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.date-picker-calendar.compact .calendar-day {
  width: 50px;
  height: 36px;
  font-size: 13px;
  border-radius: 8px;
}

.date-picker-calendar.compact .calendar-day.disabled {
  display: none;
}
.form__textarea{resize:vertical; min-height:100px; font-family:inherit}
.form__input::placeholder{color:var(--muted); opacity:0.7}

/* ===== CUSTOM SERVICE PICKER ===== */
.custom-service-picker {
  position: relative;
}

.service-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
  display: none;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  backdrop-filter: blur(16px);
}

.service-picker-dropdown.open {
  display: block;
}

.service-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-align: center;
}

.service-option:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.service-option.selected {
  background: rgba(122,162,255,0.1);
  border-color: var(--accent);
}

.service-name {
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
}

/* Десктопная версия селектора услуг */
@media (min-width: 769px) {
  .service-option {
    padding: 20px;
    font-size: 18px;
  }
  
  .service-name {
    font-size: 18px;
  }
}

.booking__submit{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:18px 24px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0e17; font-weight:600; font-size:16px; border:none; cursor:pointer; transition:all 0.3s ease; transform:translateZ(0)}
.booking__submit:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(122,162,255,0.3)}
.booking__submit:active{transform:translateY(0) scale(0.98)}
.submit__icon{transition:transform 0.3s ease}
.booking__submit:hover .submit__icon{transform:translateX(4px)}

.booking__note{min-height:20px; color:var(--muted); font-size:14px; text-align:center; margin-top:8px}

.booking__visual{display:flex; flex-direction:column; gap:20px}
.booking__card{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:24px; text-align:center; transition:all 0.3s ease; transform:translateZ(0)}
.booking__card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.card__icon{font-size:32px; margin-bottom:12px}
.booking__card h3{color:var(--text); font-size:18px; font-weight:600; margin-bottom:8px}
.booking__card p{color:var(--muted); font-size:14px; line-height:1.5}

.reviews__list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; overflow:visible; padding:20px 0}
.review{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:16px; transition:all 0.3s ease; transform:translateZ(0)}
.review:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.review__text{color:var(--text); margin-bottom:10px}
.review__meta{color:var(--muted); font-size:14px}

/* Старые стили контактов удалены - теперь в футере */
.address{background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:16px}
.address__title{color:var(--muted); margin-bottom:6px}
.map{height:160px; border-radius:10px; background:#0f1322; border:1px dashed rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:var(--muted); margin-top:10px}

.footer{padding:32px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,0.06)}
.footer__content{display:flex; justify-content:space-between; align-items:center; gap:32px}
.footer__left{display:flex; flex-direction:column; gap:12px}
.footer__brand{font-size:16px; font-weight:600; color:var(--text)}
.footer__contacts{display:flex; gap:20px; align-items:center}
.footer__contact{color:var(--muted); text-decoration:none; font-size:14px; transition:color 0.3s ease; padding:6px 0}
.footer__contact:hover{color:var(--accent)}
.footer__social{display:flex; gap:8px; align-items:center}
.social__link{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.04); color:var(--muted); text-decoration:none; transition:all 0.3s ease; border:1px solid rgba(255,255,255,0.06)}
.social__link:hover{background:rgba(255,255,255,0.08); color:var(--accent); transform:translateY(-1px); border-color:rgba(255,255,255,0.12)}

/* Нижняя часть футера */
.footer__bottom{display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.04)}
.footer__legal{display:flex; flex-direction:column; gap:4px}
.legal__text{color:var(--muted); font-size:12px; line-height:1.4}
.legal__details{color:var(--muted); font-size:11px; opacity:0.7}

/* T&C Dropdown */
.tc__container{position:relative}
.tc__trigger{display:flex; align-items:center; gap:6px; background:transparent; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:6px 8px; border-radius:6px; transition:all 0.3s ease}
.tc__trigger:hover{color:var(--text); background:rgba(255,255,255,0.05)}
.tc__arrow{transition:transform 0.3s ease; width:14px; height:14px}

@media (max-width: 480px){
  .tc__arrow{width:18px; height:18px}
  .mobile-menu__arrow{width:16px; height:16px}
}
.tc__trigger[aria-expanded="true"] .tc__arrow{transform:rotate(180deg)}

.tc__dropdown{position:absolute; bottom:100%; right:0; background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px 0; min-width:140px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all 0.3s ease; box-shadow:0 8px 25px rgba(0,0,0,0.3); z-index:100}
.tc__container:hover .tc__dropdown{opacity:1; visibility:visible; transform:translateY(0)}

.tc__item{display:block; padding:8px 16px; color:var(--muted); text-decoration:none; font-size:12px; transition:all 0.3s ease; border-bottom:1px solid rgba(255,255,255,0.04)}
.tc__item:last-child{border-bottom:none}
.tc__item:hover{color:var(--text); background:rgba(255,255,255,0.05)}
.tc__item:first-child{border-radius:8px 8px 0 0}
.tc__item:last-child{border-radius:0 0 8px 8px}


/* ===== Анимации загрузки страницы ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(122, 162, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(122, 162, 255, 0.6);
  }
}

/* Классы для анимаций */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-left {
  animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-right {
  animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-top {
  animation: slideInFromTop 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Убираем все анимации при загрузке */
.header, .hero, .hero__content, .hero__preview {
  opacity: 1;
  transform: none;
  animation: none;
}

.animate-on-scroll {
  opacity: 1;
  transform: none;
}

/* Задержки для последовательных анимаций */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-450 { animation-delay: 0.45s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Специальные анимации для элементов */
.hero__content {
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero__preview {
  animation: fadeInRight 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero__preview .card--glass {
  animation: float 6s ease-in-out infinite;
}

.hero__preview .card--ghost {
  animation: float 6s ease-in-out infinite reverse;
}

/* Анимации для карточек */
.booking__card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.booking__card:hover {
  animation: pulse 2s ease-in-out infinite;
}

/* Анимации для кнопок */
.button {
  position: relative;
  overflow: hidden;
}

/* Анимации для формы */
.form__field {
  transition: none;
}

.form__field:focus-within {
  transform: none;
}

/* Анимации для сетки работ */
.tile {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile:hover {
  /* animation: glow 2s ease-in-out infinite; */
}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; gap:20px}
  .grid{grid-template-columns:1fr 1fr}
  .reviews__list{grid-template-columns:1fr}
  .section__head{align-items:start; flex-direction:column; gap:8px}
  .section__head p{margin-top:2px}
  .container{width:min(100%, 95vw)}
  body{padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right))}
  
  /* Адаптация нового меню для планшетов */
  .header{flex-wrap:wrap; gap:16px; align-items:flex-start; padding:16px 0}
  .header__left{order:1; width:100%; justify-content:space-between; align-items:center}
  .header__brand{font-size:20px}
  .header__mode{order:2; display:flex !important; visibility:visible !important; opacity:1 !important}
  .nav--right{order:3; width:100%; justify-content:center; gap:20px; flex-wrap:wrap}
  .mode-toggle{max-width:280px; display:flex !important; visibility:visible !important; opacity:1 !important}
  .mode-btn{padding:10px 16px; font-size:13px; min-height:36px; pointer-events:auto !important; opacity:1 !important}
  .nav a{font-size:15px}
  
  .booking__wrapper{grid-template-columns:1fr; gap:40px}
  .booking__content{padding:32px}
  .form__grid{grid-template-columns:1fr; gap:16px}
}

/* Мобильное меню - скрыто по умолчанию */
.mobile-menu-toggle{display:none; position:fixed; top:20px; right:20px; z-index:1001; width:40px; height:40px; background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius:8px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:all 0.3s ease; transform:translateZ(0)}
.mobile-menu{display:none; position:fixed; inset:0; z-index:1100; flex:flex; align-items:stretch; justify-content:flex-end; contain:paint; background:rgba(0,0,0,0.4); transition:background 0.3s ease}
.mobile-menu-toggle span{width:20px; height:2px; background:var(--text); transition:all 0.3s ease; border-radius:1px}
.mobile-menu-toggle:hover{background:rgba(255,255,255,0.08); transform:translateY(-1px)}
.mobile-menu-toggle.active span{position:absolute}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg)}

/* Мобильный верхний колонтитул */
.mobile-topbar{position:fixed; top:0; left:0; right:0; height:56px; z-index:1002; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:rgba(14,15,20,0.9); border-bottom:1px solid rgba(255,255,255,0.06); transition:opacity .2s ease}
.mobile-brand{position:absolute; left:50%; top:0; transform:translateX(-50%); height:56px; display:flex; align-items:center; font-weight:700; letter-spacing:0.02em}
.mobile-topbar .mobile-menu-toggle{position:static}
.mobile-mode-switch{height:40px; padding:0 12px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--card); border:1px solid rgba(255,255,255,0.08); color:var(--text); cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.mobile-mode-switch:active{transform:scale(0.95)}
.mobile-mode-switch:hover{background:rgba(255,255,255,0.1); transform:translateY(-1px); box-shadow:0 4px 12px rgba(122,162,255,0.2)}

/* Добавляем эффект волны при касании */
.mobile-mode-switch::after{content:''; position:absolute; width:100%; height:100%; background:radial-gradient(circle, rgba(122,162,255,0.3) 0%, transparent 70%); opacity:0; transform:scale(0); transition:all 0.3s ease}
.mobile-mode-switch:active::after{opacity:1; transform:scale(1.5); transition:all 0.6s ease}

.mobile-menu__backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.4); pointer-events:auto; transition:background 0.3s ease}
.mobile-menu__content{position:relative; width:60%; max-width:350px; min-width:280px; height:100vh; background:var(--bg); border-left:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:none; will-change:transform; pointer-events:auto}
.mobile-menu.active .mobile-menu__content{transform:translateX(0)}

.mobile-menu__header{position:relative; display:flex; align-items:center; justify-content:flex-start; padding:20px; border-bottom:1px solid rgba(255,255,255,0.08)}
.mobile-menu__title{color:var(--text); font-weight:700; font-size:18px; letter-spacing:0.02em}
.mobile-menu__close{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:12px; color:var(--text); cursor:pointer}
.mobile-menu__close:hover{background:rgba(255,255,255,0.1)}

.mobile-menu__body{flex:1; overflow-y:auto; padding:20px 0; -webkit-overflow-scrolling: touch}
.mobile-menu__section{display:flex; flex-direction:column}
.mobile-menu__item{display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 20px; color:var(--text); text-decoration:none; font-weight:500; font-size:16px; letter-spacing:0.05em; text-transform:uppercase; border:none; background:transparent; cursor:pointer; transition:all 0.3s ease; border-bottom:1px solid rgba(255,255,255,0.04)}
.mobile-menu__item:hover{background:rgba(255,255,255,0.05); color:var(--accent)}
.mobile-menu__item--expandable .mobile-menu__arrow{transition:transform 0.3s ease}
.mobile-menu__expandable.expanded .mobile-menu__arrow{transform:rotate(180deg)}

.mobile-menu__submenu{display:none; background:transparent}
.mobile-menu__submenu.active{display:block}
.mobile-menu__subitem{display:block; width:100%; padding:12px 40px; color:var(--muted); text-decoration:none; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; border:none; background:transparent; cursor:pointer; transition:all 0.3s ease; text-align:left}
.mobile-menu__subitem:hover{color:var(--text); background:rgba(255,255,255,0.05)}
.mobile-menu__subitem--active{color:var(--text); background:rgba(255,255,255,0.1); font-weight:600}

/* Специальные стили для Telegram WebApp */
@media (max-width: 480px){
  .header{display:none} /* Скрываем десктопное меню только на очень маленьких экранах */
  .mobile-menu-toggle{display:flex}
  /* Важно: по умолчанию мобильное меню скрыто, открывается только через JS */
  .mobile-menu{display:none}
  body{padding-top:calc(56px + env(safe-area-inset-top))}
  
  /* Адаптивный календарь для мобильных */
  .date-picker-calendar {
    width: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: 16px;
  }
  
  .calendar-day {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .calendar-days {
    gap: 3px;
  }
  
  .calendar-weekdays {
    gap: 2px;
  }
  
  .weekday {
    font-size: 11px;
    padding: 6px 0;
  }
}

/* ===== СТРАНИЦА 404 ===== */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.error-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.error-animation {
  margin-bottom: 3rem;
  position: relative;
}

.error-number {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.digit {
  font-size: 8rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(122, 162, 255, 0.5);
  animation: digitFloat 3s ease-in-out infinite;
}

.digit:nth-child(1) { animation-delay: 0s; }
.digit:nth-child(2) { animation-delay: 0.5s; }
.digit:nth-child(3) { animation-delay: 1s; }

@keyframes digitFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.error-text {
  margin-bottom: 3rem;
}

.error-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.error-description {
  font-size: 1.125rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.button--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0e17;
}

.button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(122, 162, 255, 0.3);
}

.button--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}


/* Мобильная адаптивность для 404 */
@media (max-width: 768px) {
  .error-page {
    padding: 1rem;
  }
  
  .digit {
    font-size: 5rem;
  }
  
  .error-title {
    font-size: 2rem;
  }
  
  .error-description {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  /* Адаптивный селектор услуг для мобильных */
  .service-picker-dropdown {
    padding: 8px;
  }
}

/* При открытой модалке выбора режима скрываем мобильный топбар */
.modal-open .mobile-topbar{opacity:0; pointer-events:none}

/* Убеждаемся, что переключатель виден на всех экранах больше 480px */
@media (min-width: 481px){
  .header{display:flex !important}
  .header__mode{display:flex !important; visibility:visible !important; opacity:1 !important}
  .mode-toggle{display:flex !important; visibility:visible !important; opacity:1 !important}
  .mode-btn{display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important}
  .mobile-topbar{display:none}
}
@media (max-width: 480px){
  .hero{padding:100px 0 32px}
  .hero__title-main{font-size:48px}
  .hero__title-prefix{font-size:20px}
  .hero__mode-btn{padding:10px 16px; font-size:14px; min-height:36px}
  .hero__actions{flex-direction:column; gap:12px}
  .button{padding:14px 20px; font-size:16px; text-align:center}
  .button--primary{padding:18px 32px; font-size:16px; border-radius:14px}
  .faq__question{padding:16px 20px; font-size:15px}
  .faq__answer p{padding:0 20px 16px; font-size:14px}
  .booking__wrapper{gap:32px}
  .booking__content{padding:24px}
  .booking__header{margin-bottom:24px}
  .mode-toggle{max-width:100%; width:100%}
  .mode-btn{padding:8px 12px; font-size:12px; min-height:32px}
  .hero__title-main{font-size:40px}
  .hero__title-prefix{font-size:18px}
  .hero__mode-btn{padding:8px 12px; font-size:13px; min-height:32px}
  .button--primary{padding:16px 28px; font-size:15px; border-radius:12px}
  .faq__question{padding:14px 16px; font-size:14px}
  .faq__answer p{padding:0 16px 14px; font-size:13px}
  .form__grid{gap:16px}
  .form__input{padding:14px 16px; font-size:16px}
  .form__input[type="date"]{padding:14px 16px; padding-right:40px}
  .booking__submit{padding:16px 20px; font-size:16px}
  .booking__visual{gap:16px}
  .booking__card{padding:20px}
  .footer__content{flex-direction:column; gap:20px; align-items:center; text-align:center}
  .footer__left{gap:10px}
  .footer__contacts{flex-direction:column; gap:8px}
  .footer__contact{font-size:13px}
  .footer__social{gap:6px}
  .social__link{width:32px; height:32px}
  .footer__bottom{flex-direction:column; gap:16px; align-items:center; text-align:center}
  .footer__legal{gap:6px}
  .legal__text{font-size:11px}
  .legal__details{font-size:10px}
  .tc__dropdown{right:auto; left:50%; transform:translateX(-50%) translateY(8px)}
  .tc__container:hover .tc__dropdown{transform:translateX(-50%) translateY(0)}
  .tc__container{display:none}
}

/* Убираем «срезы» (скругления) у основных фоновых блоков */
.booking__content,
.booking__card,
.review,
.address,
.map,
.tile {
  border-radius: 0 !important;
}

/* ===== НОВЫЕ СТИЛЬНЫЕ АНИМАЦИИ ===== */

/* Плавающие частицы на фоне */
@keyframes float-particles {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
  33% { transform: translateY(-20px) rotate(120deg); opacity: 1; }
  66% { transform: translateY(10px) rotate(240deg); opacity: 0.8; }
}

/* Градиентная анимация для заголовков */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Эффект свечения при наведении */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(122, 162, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(122, 162, 255, 0.6), 0 0 60px rgba(154, 122, 255, 0.4); }
}

/* Анимация появления сверху */
@keyframes slide-in-top {
  0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Убираем проблемную анимацию bounce-in */

/* Волновая анимация для кнопок */
@keyframes wave-effect {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(1deg); }
  50% { transform: scale(1.05) rotate(-1deg); }
  75% { transform: scale(1.02) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Применяем стильные анимации */
.hero__content h1 {
  background: linear-gradient(-45deg, var(--text), var(--accent), var(--accent-2), var(--text));
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

.button {
  position: relative;
  overflow: hidden;
}

.button:hover {
  animation: wave-effect 0.6s ease;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.button:hover::before {
  left: 100%;
}

.tile {
  position: relative;
  overflow: hidden;
}

.tile::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, rgba(122, 162, 255, 0.1), transparent, rgba(154, 122, 255, 0.1), transparent);
  animation: float-particles 8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tile:hover::before {
  opacity: 1;
}

.tile:hover {
  animation: glow-pulse 2s ease infinite;
}

/* Убираем дублирующие стили - они уже определены выше */

/* Анимация для мобильных элементов меню */
.mobile-menu__item {
  position: relative;
  overflow: hidden;
}

.mobile-menu__item::before {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(122, 162, 255, 0.1), transparent);
  transition: left 0.3s ease;
}

.mobile-menu__item:hover::before {
  left: 100%;
}

/* Убираем анимированные частицы */

/* Эффект печатной машинки для подзаголовков */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

/* Эффект печатной машинки только на десктопе */
@media (min-width: 769px) {
  .hero__content p {
    overflow: hidden;
    border-right: 2px solid var(--accent);
    white-space: nowrap;
    animation: 
      typewriter 3.5s steps(40, end),
      blink-caret 0.75s step-end infinite;
  }
}

/* На мобильных отключаем эффект печатной машинки */
@media (max-width: 768px) {
  .hero__content p {
    border-right: none;
    white-space: normal;
    animation: none;
    overflow: visible;
  }
}

/* Улучшенная анимация для формы */
.form__field {
  position: relative;
}

/* Эффект параллакса для карточек */
.hero__preview .card {
  transition: transform 0.1s ease;
}

/* Анимация загрузки для всей страницы */
@keyframes page-load {
  0% { 
    opacity: 0; 
    transform: translateY(20px) scale(0.98); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

body {
  animation: page-load 0.8s ease;
}

/* ===== SPLASH SCREEN ===== */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  background: var(--bg);
  overflow: hidden;
}

.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: -1;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: splashFadeIn 0.8s ease;
  background: transparent;
  border: none;
  outline: none;
}

.splash-logo {
  width: 180px;
  height: 180px;
  opacity: 0;
  transform: scale(0.8);
  animation: logoAppear 1.2s ease 0.3s forwards;
}

.splash-loader {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  animation: loaderAppear 0.5s ease 1.5s forwards;
}

.splash-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  animation: loaderProgress 2s ease 2s infinite;
}

/* Анимации для splash screen */
@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loaderAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderProgress {
  0% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}