:root{ --vh: 1vh; }

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.info{
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.panel{
  position: relative;
  width: 100vw;
  height: calc(var(--vh) * 100);
  overflow: hidden;
  scroll-snap-align: start;
}

.panel-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

.lazy{ filter: blur(1px); transition: filter .5s ease-out; }
.lazy.loaded{ filter: blur(0); }

.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events:none;
}

.panel-overlay{
  position:absolute;
  left:50%;
  bottom: 6.5vw;
  transform: translateX(-50%);
  z-index: 3;
  width: min(1100px, 92vw);
  color: var(--main-white-font-color);
  text-align: center;
}

.panel-overlay h2{
  font-family: var(--main-font-family);
  text-transform: uppercase;
  font-size: 3.19vw;
  font-weight: 800;
  margin: 0 0 1vw 0;
}

.panel-overlay p{
  margin: 0 auto 2.2vw auto;
  max-width: 72ch;
  font-size: 1.12vw;
  opacity: .95;
}

.info-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25vw;
  margin: 0 auto 2.2vw auto;
  text-align: left;
}

.info-card{
  border: solid 0.14vw rgba(255,255,255,.65);
  border-radius: 1.11vw;
  padding: 1.39vw 1.6vw;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
}

.info-card h3{
  margin: 0 0 .8vw 0;
  text-transform: uppercase;
  font-size: 1.35vw;
  letter-spacing: .03em;
}

.info-card ul{
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: .6vw;
  font-size: 1.05vw;
}

.muted{ opacity: .85; font-size: 1.02vw; }

.panel-actions{
  display:flex;
  justify-content:center;
  gap: 1.25vw;
  flex-wrap: wrap;
}

.panel-actions button{
  font-family: var(--main-font-family);
  text-transform: uppercase;
  font-size: 1.1vw;
  font-weight: 600;
  color: var(--main-white-font-color);
  background: transparent;
  border: solid 0.14vw var(--main-white-font-color);
  padding: 1.1vw 2.1vw;
  cursor: pointer;
  transition: .25s;
}

.panel-actions button:hover{
  background: var(--main-white-font-color);
  color: var(--main-font-color);
}

.panel-actions button.ghost{
  border-color: rgba(255,255,255,.65);
  color: rgba(255,255,255,.95);
}

.panel-actions button.small{
  width: 100%;
  margin-top: .6vw;
  padding: .9vw 1.1vw;
  font-size: 1vw;
}

.link{ color: #fff; text-decoration: underline; }

.faq{
  display: grid;
  gap: 1vw;
  margin: 0 auto 2.2vw auto;
  width: min(900px, 92vw);
  text-align: left;
}

.faq-item{
  border: solid 0.14vw rgba(255,255,255,.65);
  border-radius: 1.11vw;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  padding: 1vw 1.2vw;
}

.faq-item summary{
  cursor:pointer;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05vw;
}

.faq-item p{
  margin: .8vw 0 0 0;
  font-size: 1.05vw;
  opacity: .95;
}

.info-nav{
  position: fixed;
  top: 50%;
  left: 1.1vw;
  transform: translateY(-50%);
  z-index: 9999;
  display: grid;
  gap: .7vw;
}

.info-nav a{
  font-size: .9vw;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: .55vw .8vw;
  border-radius: .8vw;
  border: solid 0.14vw rgba(255,255,255,.25);
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(6px);
  transition: .2s;
}

.info-nav a:hover{
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
}

/* “підказка скролу” */
.panel-hint{
  position:absolute;
  left:50%;
  bottom: 2.2vw;
  transform: translateX(-50%);
  z-index: 4;
  width: 2.2vw;
  height: 3.5vw;
  border-radius: 2vw;
  border: solid 0.14vw rgba(255,255,255,.65);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: .55vw;
  background: rgba(0,0,0,.15);
}

.panel-hint span{
  width: .45vw;
  height: .45vw;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: dot 1.2s infinite;
}

@keyframes dot{
  0%{ transform: translateY(0); opacity:.9; }
  70%{ transform: translateY(1.2vw); opacity:.3; }
  100%{ transform: translateY(0); opacity:.9; }
}

/* Адаптив */
@media (max-width: 1024px){
  .panel-overlay{ bottom: 12vw; }
  .panel-overlay h2{ font-size: 6vw; }
  .panel-overlay p{ font-size: 2.8vw; margin-bottom: 4vw; }
  .info-grid{ grid-template-columns: 1fr; gap: 3vw; margin-bottom: 4vw; }
  .info-card{ border-width: .4vw; border-radius: 3vw; padding: 3vw; }
  .info-card h3{ font-size: 3.4vw; }
  .info-card ul{ font-size: 2.8vw; gap: 2vw; }
  .panel-actions button{ font-size: 2.8vw; padding: 2.5vw 4vw; border-width: .4vw; }
  .info-nav{ display:none; } /* щоб не заважала на мобілці */
  .faq-item{ border-width: .4vw; border-radius: 3vw; padding: 3vw; }
  .faq-item summary{ font-size: 2.8vw; }
  .faq-item p{ font-size: 2.8vw; }
}