/* Главная страница. Та же чистота, что и на записи: тёмная база,
   один акцент, одна главная кнопка внизу. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 24px;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
h1, h2 { margin: 0; }
a { color: inherit; }

.hero { position: relative; min-height: 78svh; display: flex; flex-direction: column; }
.hero__media { position: absolute; inset: 0; background: #101317; overflow: hidden; }
.hero__placeholder {
  position: absolute; inset: 64px var(--s-4) var(--s-4);
  border: 1px dashed var(--stroke-strong); border-radius: var(--r-lg);
  display: grid; place-items: center; color: var(--text-3);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.hero__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background: linear-gradient(to bottom, rgba(11,13,16,0), rgba(11,13,16,.94) 76%, var(--bg));
  pointer-events: none;
}
.hero__top {
  position: relative; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--page-x);
}
.logo { width: 32px; height: 32px; display: block; }
.hero__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.hero__body { position: relative; margin-top: auto; padding: 0 var(--page-x) var(--s-8); }

.rubric {
  margin: 0 0 var(--s-2); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.hero__title { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; }

.rating {
  display: inline-flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--stroke); border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); text-decoration: none;
}
.rating__stars { color: var(--star); font-size: 15px; letter-spacing: .06em; }
.rating__value { font-size: 20px; font-weight: 700; }
.rating__count { font-size: 13px; color: var(--text-2); }

.hero__addr, .hero__open { margin: 0 0 var(--s-1); font-size: 15px; line-height: 20px; color: var(--text-2); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: var(--s-2); vertical-align: middle; }
.hero__acts { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }

.page { padding: 0 var(--page-x); max-width: 620px; margin: 0 auto; }

.promo {
  margin-top: var(--s-8); padding: var(--s-4);
  background: var(--surface); border-radius: var(--r-md);
}
.promo b { font-size: 17px; }
.promo p { margin: var(--s-2) 0 0; font-size: 15px; line-height: 21px; color: var(--text-2); }

.block { padding-top: var(--s-12); }
.block__title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; }
.block__hint { margin: var(--s-2) 0 var(--s-4); font-size: 15px; line-height: 21px; color: var(--text-2); }

.cards { display: flex; flex-direction: column; gap: var(--s-2); }
.card {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--stroke); border-radius: var(--r-md);
}
.card__name { display: block; font-size: 17px; font-weight: 600; }
.card__what { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.card__dur { display: block; margin-top: var(--s-2); font-size: 13px; color: var(--text-3); }
.card__price { font-size: 22px; font-weight: 700; white-space: nowrap; }
.card__price small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-right: 6px; }
.cards--flat .card { grid-template-columns: 1fr; }

.reviews__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.reviews__big { font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -.03em; }
.reviews__count { margin: var(--s-1) 0 0; font-size: 13px; color: var(--text-2); }
.review { margin: 0 0 var(--s-3); padding: var(--s-4); background: var(--surface); border-radius: var(--r-md); }
.review p { margin: 0 0 var(--s-2); font-size: 15px; line-height: 21px; }
.review cite { font-style: normal; font-size: 13px; color: var(--text-3); }

.perks { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.perks li { font-size: 15px; color: var(--text-2); }

.addr { font-size: 17px; line-height: 26px; color: var(--text-2); }
.acts { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--s-4);
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  text-decoration: none; font-size: 15px; font-weight: 600;
}

.foot { padding: var(--s-12) 0 0; font-size: 13px; color: var(--text-3); }
.tail { height: 120px; }

.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--s-3) var(--page-x) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(11,13,16,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--stroke);
}
.cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 620px; margin: 0 auto; height: 56px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.cta:active { background: var(--accent-press); transform: scale(.985); }

@media (min-width: 768px) {
  .hero__top, .hero__body { max-width: 620px; margin-left: auto; margin-right: auto; width: 100%; }
  .hero__title { font-size: 44px; line-height: 50px; }
}