:root{
  /* фон */
  --bg-url: url("../assets/angela_hq.jpg");

  /* ультра-лёгкое стекло */
  --glass-bg: rgba(255,255,255,.10);
  --glass-brd: rgba(255,255,255,.26);
  --glass-shadow: 0 22px 68px rgba(0,0,0,.26);

  /* палитра/шрифты */
  --text: #eaf0f6;
  --text-weak: #d7dde6;

  --radius-xl: 22px;
  --safe-bottom: max(env(safe-area-inset-bottom), 16px);
  --safe-top: max(env(safe-area-inset-top), 10px);

  /* === добавлено ранее для модалки === */
  --overlay: rgba(10,12,16,.55);
  --sheet-glass-bg: rgba(18,20,26,.50);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ background:#000 }
body{
  margin:0; color:var(--text);
  font: 500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== ФОН ===== */
.bg{
  position:fixed; inset:0;
  background: center / cover no-repeat var(--bg-url), #0a0b0e;
  filter: saturate(110%) contrast(104%);
}
/* убрали виньетку целиком */
.bg::after{ content:none }

/* ===== Хедер ===== */
.hero-header{
  position:fixed; left:0; right:0; top:0;
  padding: calc(6px + var(--safe-top)) 18px 8px;
  text-align:center; pointer-events:none;
}
.brand-logo{
  margin:2px auto 6px; font-weight:800;
  letter-spacing:.4px; line-height:1.08; color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 22px rgba(255,255,255,.30);
  animation: glow 3.2s ease-in-out infinite alternate;
}
.brand-sub{
  margin:0 auto; max-width:92vw;
  font-size:14px; color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce){ .brand-logo{ animation:none } }
@keyframes glow{
  from{ text-shadow:0 1px 0 rgba(0,0,0,.35), 0 6px 16px rgba(255,255,255,.18) }
  to  { text-shadow:0 1px 0 rgba(0,0,0,.35), 0 12px 30px rgba(255,255,255,.34) }
}

/* ===== Низ: карточка + легал ===== */
.intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh; /* блок прижат книзу */
  padding-bottom: calc(var(--safe-bottom) - 4px); /* плотно */
  gap: 0;
}
.legal{
  font-size:12px; opacity:.95; text-align:center; color:#e2e7ee;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  margin: 4px 0 0;
}

/* ===== Карточка ===== */
.card-glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.intro-card{
  margin: 0 auto;
  max-width: 760px;
  padding: 22px 22px 6px; /* убран воздух снизу */
  color:#f7fbff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  display:flex; flex-direction:column; justify-content:flex-start;
  animation: rise .35s cubic-bezier(.2,.7,.2,1);
}
.intro-card > :last-child{ margin-bottom:0 !important; }
@keyframes rise{
  from{ transform: translateY(8px); opacity:.0 }
  to  { transform: none; opacity:1 }
}

.intro-title{ margin:0 0 8px; font-size: clamp(20px, 4.8vw, 34px); line-height:1.15 }
.intro-lead{ margin:0; font-size: clamp(14px, 3.8vw, 18px) }
.intro-more{ margin-top:12px; margin-bottom:8px }
.intro-more[hidden]{ display:none }
.intro-more:not([hidden]){ animation: fadeInUp .24s ease both }
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: none } }
.intro-more p{ margin:0 0 8px }

.intro-actions{ margin-top:10px; margin-bottom:0; display:flex; gap:10px; flex-wrap:wrap }

/* ===== Кнопки ===== */
.btn-primary{
  background:#0e1016; color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:12px 18px; border-radius:999px; font-weight:700;
}
.btn-ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:12px 16px; border-radius:999px; font-weight:600;
}
.btn-link{
  appearance:none; background:transparent; border:0;
  padding:0 8px; border-radius:999px; text-decoration:none; font-weight:600;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.22);
}
.btn-link:active{ transform: translateY(1px) }

/* читаемость «Подробнее» */
.intro-actions .btn-link{
  padding:12px 16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:none;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35);
}

/* плавные переходы */
.btn-primary, .btn-ghost, .btn-link, .chip{
  transition: transform .12s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, opacity .18s ease;
  will-change: transform;
}
.btn-primary:hover, .btn-ghost:hover, .chip:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.28) }
.btn-primary:active, .btn-ghost:active, .chip:active{ transform: translateY(1px) }

/* ===== Модалка ===== */
.modal{
  position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center;
  padding:18px; pointer-events:none; contain: paint;
}
.modal::before{
  content:"";
  position:fixed; inset:0;
  background: var(--overlay);
  opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.modal[aria-hidden="true"]{ visibility:hidden; opacity:0; transition:.25s ease }
.modal[aria-hidden="false"]{
  visibility:visible; opacity:1; pointer-events:auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[aria-hidden="false"]::before{ opacity:1 }

.modal__sheet{
  width:min(720px, 100%); border-radius:24px; padding:14px 14px 10px;
  transform: translateY(16px);
}
.modal[aria-hidden="false"] .modal__sheet{ transform:none; transition:.28s cubic-bezier(.2,.7,.2,1) }

.modal .card-glass{
  background: var(--sheet-glass-bg);
  border-color: rgba(255,255,255,.30);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  will-change: transform, opacity;
}

.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 10px }
.modal__head h3{ margin:0; font-size: clamp(16px, 4.2vw, 22px) }
.modal__close{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size:24px; line-height:1; padding:4px 10px; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ===== Список дней ===== */
.days{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:10px }
.day{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px; border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
}
.day{ transition: background-color .18s ease, border-color .18s ease }
.day:not(.day--busy):hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

.day__left{ display:flex; align-items:center; gap:12px }
.day__dow{ font-weight:800; width:34px; text-align:center }
.day__date{ opacity:.95 }

/* ===== Капсулы ===== */
.chip{ 
  padding:10px 16px; 
  border-radius:999px; 
  font-weight:700; 
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; white-space:nowrap;
}
.chip.book{ background:#0e1016; color:#fff; border:1px solid rgba(255,255,255,.22) }

/* Забронировано */
.chip.lock{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.28);
  box-shadow: none;
  padding:10px 16px;
  font-weight:700;
}
.day.day--busy{ opacity:.85 }
.day.day--busy .chip.lock{ opacity:.85 }
.day.day--busy:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22) }

/* адаптив под телефоны */
@media (max-width:520px){
  .intro-card{ padding:18px 16px 6px; }
  .brand-sub{ font-size:13px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
  .brand-logo{ animation: none }
}