:root{
  --bg:#0d1117; --bg-soft:#151c26; --line:#232c3a;
  --fg:#e8edf4; --fg-dim:#9aa7b8; --accent:#5bb3f0; --accent-ink:#06121e;
  --max:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:0; overflow-x:hidden;
  background:var(--bg); color:var(--fg);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
main{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:clamp(1.75rem,5vw,3rem) 1.25rem 3rem;
}
main a{color:var(--accent)}

.brand{
  font-size:1.05rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin:0; text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.brand a{color:inherit; text-decoration:none}

.badge{
  display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  background:rgba(6,12,20,.28); padding:.4rem .85rem; margin:1.1rem 0 0;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

h1{
  font-size:clamp(1.9rem,6.5vw,2.9rem); line-height:1.15; font-weight:700;
  letter-spacing:-.02em; margin:0 0 1rem;
}
.hero h1{
  color:#fff; margin:1.1rem 0 0;
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.lede{font-size:clamp(1.05rem,3vw,1.2rem); color:var(--fg-dim); margin:0 0 2.5rem}

h2{
  font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg-dim); margin:3rem 0 .85rem;
}
h3{font-size:1.05rem; font-weight:700; margin:0 0 .6rem}
p{margin:0 0 1.1rem}

ul{margin:0 0 1.1rem; padding-left:1.15rem}
li{margin-bottom:.45rem}

.season{
  background:var(--bg-soft); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:.75rem; padding:1.5rem; margin:0 0 1.5rem;
}
.season h3{color:var(--accent)}
.season p:last-child{margin-bottom:0}
.meta{font-size:.92rem; color:var(--fg-dim)}

/* Шапка во всю ширину окна, первый блок страницы. */
.hero{
  position:relative; overflow:hidden; background:#0a0f16;
  min-height:clamp(19rem,64vh,34rem);
  display:flex; flex-direction:column; justify-content:space-between;
}
.hero img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* Затемнение сверху под логотип и снизу под цитаты. */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(6,12,20,.72) 0%, rgba(6,12,20,.2) 26%, rgba(6,12,20,0) 48%),
    linear-gradient(to top, rgba(6,12,20,.92) 0%, rgba(6,12,20,.5) 40%, rgba(6,12,20,0) 68%);
}
/* Ширина подобрана так, чтобы текст встал ровно по колонке страницы. */
.hero-top,
.hero-inner{
  position:relative; z-index:1;
  width:100%; max-width:calc(var(--max) + 2.5rem); margin:0 auto;
  padding:clamp(1.4rem,4vw,2.25rem) 1.25rem;
}
.hero-inner{
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:.55rem; min-height:9rem;
}
.quotes{display:grid}
.quote{
  grid-area:1/1; margin:0; opacity:0; pointer-events:none;
  transition:opacity .9s ease; align-self:end;
}

/* Управление каруселью держим приглушённым: оно не должно спорить с текстом. */
.hero-nav{
  display:flex; align-items:center; gap:.15rem;
  opacity:.6; transition:opacity .25s ease;
}
.hero-nav:hover,
.hero-nav:focus-within{opacity:1}
.nav-arrow{
  appearance:none; cursor:pointer; flex:0 0 auto;
  width:1.5rem; height:1.5rem; padding:0; border:0; background:none;
  color:#fff; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.dots{display:flex; gap:0}
.dot{
  appearance:none; cursor:pointer; padding:0; border:0; background:none;
  width:1.15rem; height:1.5rem; display:grid; place-items:center;
}
.dot::before{
  content:""; width:.34rem; height:.34rem; border-radius:999px;
  background:rgba(255,255,255,.35);
  box-shadow:0 1px 5px rgba(0,0,0,.45);
  transition:background .3s ease;
}
.dot.is-active::before{background:rgba(255,255,255,.95)}
.nav-arrow:focus-visible,
.dot:focus-visible{outline:1px solid rgba(255,255,255,.8); outline-offset:1px}
@media (prefers-reduced-motion: reduce){
  .hero-nav, .dot::before{transition:none}
}
.quote.is-active{opacity:1}
.quote blockquote{
  margin:0 0 .6rem; color:#fff; font-weight:600;
  font-size:clamp(1.05rem,3.2vw,1.4rem); line-height:1.35;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.quote figcaption{
  color:rgba(255,255,255,.72); font-size:.85rem; letter-spacing:.04em;
}
@media (prefers-reduced-motion: reduce){ .quote{transition:none} }

/* Шапка страницы курорта: ниже главной, внизу строка с ключевыми цифрами. */
.hero--resort{min-height:clamp(17rem,48vh,27rem)}
.hero--resort .hero-inner{min-height:0}
.hero-facts{
  margin:0; color:rgba(255,255,255,.8); font-size:.9rem; letter-spacing:.03em;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hero-facts::first-letter{text-transform:uppercase}

/* На телефоне шапка занимает меньше экрана, чтобы текст начинался раньше. */
@media (max-width:36rem){
  .hero{min-height:clamp(14rem,54vh,27rem)}
  .hero--resort{min-height:clamp(13rem,42vh,21rem)}
  .hero-top,
  .hero-inner{padding:1.15rem 1.25rem}
  .hero-inner{min-height:6.5rem}
  .hero--resort .hero-inner{min-height:0}
  .hero h1{margin-top:.8rem}
  .badge{margin-top:.8rem}
}

.cards{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:36rem){ .cards{grid-template-columns:1fr 1fr} }
.card{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:.75rem; padding:1.4rem;
}
.card p:last-child{margin-bottom:0; font-size:.96rem}

.levels{list-style:none; padding:0; margin:0 0 1.1rem}
.levels li{
  display:flex; gap:.9rem; padding:.8rem 0; margin:0;
  border-bottom:1px solid var(--line); font-size:.96rem;
}
.levels li:last-child{border-bottom:0}
.levels b{flex:0 0 4.6rem; color:var(--accent); font-size:.82rem; letter-spacing:.06em; padding-top:.15rem}

.resorts{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.resorts li{margin:0}
.resorts a{
  display:block; font-size:.9rem; color:var(--fg-dim); text-decoration:none;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:.4rem; padding:.35rem .7rem;
}
.resorts a:hover{color:var(--fg); border-color:var(--accent)}

/* Сетка курортов на главной. */
.resort-grid{
  list-style:none; padding:0; margin:0 0 1.1rem;
  display:grid; gap:.7rem; grid-template-columns:1fr;
}
@media (min-width:36rem){ .resort-grid{grid-template-columns:1fr 1fr} }
.resort-grid li{margin:0}
.resort-card{
  display:block; height:100%; text-decoration:none; color:var(--fg);
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:.65rem; padding:.95rem 1.1rem;
  transition:border-color .2s ease;
}
.resort-card:hover{border-color:var(--accent)}
.resort-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.resort-card b{display:block; font-size:1rem; margin-bottom:.2rem}
.resort-card span{display:block; font-size:.88rem; color:var(--fg-dim); line-height:1.45}
.resort-card small{display:block; margin-top:.45rem; font-size:.78rem; color:var(--accent); letter-spacing:.03em}

/* Хлебные крошки на страницах курортов. */
.crumbs{font-size:.85rem; color:var(--fg-dim); margin:0 0 1.25rem}
.crumbs a{color:var(--fg-dim)}
.crumbs a:hover{color:var(--accent)}

/* Таблица фактов о курорте. */
.facts{margin:0 0 1.1rem; border-top:1px solid var(--line)}
.facts div{
  display:grid; grid-template-columns:minmax(7.5rem,32%) 1fr; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.96rem;
}
.facts dt{color:var(--fg-dim)}
.facts dd{margin:0}
@media (max-width:30rem){
  .facts div{grid-template-columns:1fr; gap:.1rem}
}

.faq h3{margin-top:1.4rem}
.faq p{color:var(--fg)}

.contact{
  margin-top:3rem; padding:1.5rem; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:.75rem;
}
.contact p{margin:0 0 1rem; color:var(--fg-dim); font-size:.95rem}
.links{display:flex; flex-wrap:wrap; gap:.6rem}
.links a{
  display:inline-block; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.6rem 1.1rem; border-radius:.45rem;
  background:var(--accent); color:var(--accent-ink);
}
.links a.ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
.links a:hover{opacity:.88}
.links a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

footer{
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--fg-dim);
}
footer p{margin:0}

@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --bg-soft:#f5f7fa; --line:#dfe4ec;
    --fg:#111820; --fg-dim:#5a6675; --accent:#0a66a8; --accent-ink:#ffffff;
  }
}