:root{
    --bg-top: #050617;
    --bg-bottom: #0f1520;
    --card-bg: rgba(8,12,18,0.65);
    --accent1: #8a3cf6;
    --accent2: #b24ff6;
    --btn-grad: linear-gradient(90deg,var(--accent1),var(--accent2));
    --purple: #7f2adf;
    --green-highlight: #5fe2a6;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background:
      /* тонкі зірки (пунктирна сітка) */
      radial-gradient(circle at 8% 10%, rgba(255,255,255,0.02) 0 1px, transparent 1px),
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.02) 0 1px, transparent 1px),
      repeating-radial-gradient(circle, rgba(255,255,255,0.006) 0 1px, transparent 2px 5px),
      linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
    background-attachment: fixed;
  }
  a {
    text-decoration: none;
  }

  /* Header (як на картинці: дрібні посилання ліворуч, кнопка входу праворуч) */
  .site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 28px;
    color: rgba(230,238,248,0.72);
    font-size:14px;
  }
  .site-header .left a,
  .site-header .right a{
    color: rgba(230,238,248,0.6);
    text-decoration:none;
    margin-right:16px;
  }
  .site-header .right a {
    background: rgba(255,255,255,0.04);
    padding: 6px 12px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;

    /* ТУТ ДОДАНО БІЛУ ОБВОДКУ */
    border: 1px solid rgba(255,255,255,0.6);

    display: inline-flex;
    align-items: center;
    gap: 6px;
}

  /* Main centered block */
  .wrap {
    max-width: 1100px;
    margin: 30px auto 70px;
    padding: 40px 20px 80px;
  }

  .title {
    text-align:center;
    margin-top:6px;
    margin-bottom:36px;
  }
  .title h1{
    font-size:28px;
    margin:0;
    letter-spacing:0.4px;
    color:#fff;
    display:inline-block;
    position:relative;
    padding-bottom:12px;
  }
  /* underline like on image */
  .title h1::after{
    content:"";
    width:120px;
    height:3px;
    background:linear-gradient(90deg,#ffffff55, #ffffff22);
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    border-radius:3px;
    box-shadow:0 6px 0 rgba(0,0,0,0.25);
  }

  /* dark rectangle behind the cards (as in image) */
 .panel {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.panel-wrapper {
  background: rgba(0, 0, 0, 0.40);
  padding: 60px 90px;
  border-radius: 18px;
  display: flex;
  gap: 90px;
}

.girl-card {
  width: 260px;
  text-align: center;
  color: #fff;
}

.girl-card img {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 20px;
}

.girl-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.girl-card .votes {
  font-size: 15px;
  opacity: .75;
  margin-bottom: 18px;
}

.vote-btn {
  width: 100%;
  font-size: 16px;
  background: #9726FF;
  border: none;
  padding: 12px 0;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  transition: .2s;
}

.vote-btn:hover {
  background: #7c19d1;
}
  /* counters area below */
  .stats {
    margin-top:56px;
    text-align:center;
  }
  .stats .lead{
    color: var(--green-highlight);
    font-weight:800;
    font-size:20px;
    margin-bottom:12px;
  }

  .stats .numbers{
    display:flex;
    justify-content:center;
    gap:56px;
    margin-top:12px;
    color:#fff;
    font-weight:800;
  }
  .stat {
    text-align:center;
  }
  .stat .num{font-size:26px}
  .stat .label{font-size:12px;color:rgba(230,238,248,0.6);font-weight:500;margin-top:6px}

  /* Modal (centered white box) */
  .modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    background: rgba(4,6,12,0.6);
    backdrop-filter: blur(4px);
    align-items:center;
    justify-content:center;
  }
  .modal .box {
    width:520px;
    max-width:92%;
    background:#fff;
    border-radius:12px;
    padding:28px 28px 22px;
    position:relative;
    text-align:center;
    box-shadow: 0 30px 80px rgba(2,6,20,0.6);
  }

  /* circular orange icon on modal */
  .modal .circle {
    width:78px;height:78px;border-radius:50%;
    background: linear-gradient(180deg,#fff3e0,#ffd59b);
    display:flex;align-items:center;justify-content:center;
    font-size:34px;color:#b36100;margin: -70px auto 6px;
    box-shadow: 0 16px 30px rgba(255,150,50,0.12);
    border: 6px solid rgba(255,255,255,0.25);
  }

  .modal h3{margin:6px 0 6px;color:#1b2330;font-size:20px}
  .modal p{margin:6px 0 18px;color:#6f7882;font-size:14px;line-height:1.4}

  .modal .tg-btn {
    display:inline-flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#1da1f2;
    color:#fff;
    padding:12px 18px;border-radius:10px;font-weight:700;
    box-shadow: 0 12px 30px rgba(29,161,242,0.12);
  }

  /* close "X" in small pink circle (top-right) */
  .modal .close-wrap {
    position:absolute;
    top:-18px;
    right:-18px;
    width:40px;height:40px;border-radius:50%;
    background:#ffdfe6;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    color:#9b2a2a;font-weight:700;
  }
.about-section, .faq-section {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding: 65px 20px;
}

/* ===== О НАС ===== */

.about-title {
  text-align: center;
  color: #ff3f3f;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 45px;
  position: relative;
}

.about-title::after {
  content: "";
  width: 80px;
  height: 2.4px;
  background: #ff3f3f;
  display: block;
  margin: 8px auto 0;
  border-radius: 6px;
}

.about-cards {
  display: flex;
  justify-content: center;
  gap: 55px;
  flex-wrap: wrap;
  margin-bottom: 35px;
  background: #161b2e;
}

.about-card {
  
  padding: 35px 25px;
  text-align: center;
  width: 290px;
 
}

.about-card img {
  width: 68px;
  margin-bottom: 15px;
}

.about-card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.about-card p {
  color: #bfc2d4;
  font-size: 15px;
  line-height: 1.45;
}

.about-btn {
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  background: #7d3cff;
  color: #fff;
  border: none;
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 32px;
  cursor: pointer;
  transition: .25s;
}

.about-btn:hover {
  background: #9b59ff;
}

/* ===== FAQ гармонь ===== */

.faq-title {
  text-align: center;
  color: #ffd32a;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 45px;
  position: relative;
}

.faq-title::after {
  content: "";
  width: 90px;
  height: 3px;
  background: #ffd32a;
  display: block;
  margin: 10px auto 0;
  border-radius: 10px;
}

.faq-list { display: flex; flex-direction: column; gap: 18px; }

.faq-item { border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 8px; }

.faq-question {
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px 0;
  transition: .2s;
}

.faq-question:hover { color: #ffd32a; }

.faq-icon { font-size: 18px; transition: .25s; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  font-size: 15px;
  transition: max-height .35s ease;
}

.faq-item.active .faq-answer { max-height: 260px; margin-top: 8px; }
.faq-item.active .faq-icon { transform: rotate(45deg); color: #ffd32a; }

  /* responsive */
  @media (max-width:900px){
    .panel{padding:46px 20px;gap:32px}
    .avatar-wrap{width:190px;height:190px;margin-top:-120px}
  }
  @media (max-width:560px){
    .wrap{padding:30px 12px 60px}
    .panel{flex-direction:column;align-items:center;padding:36px 18px}
    .contestant{width:90%}
    .avatar-wrap{margin-top:-100px}
    .modal .box{padding:18px}
    .modal .circle{width:64px;height:64px;font-size:28px;margin:-54px auto 6px}
  }

  /* Планшет 992px–1200px */
@media (max-width: 1200px) {
  .panel-wrapper {
    padding: 50px 60px;
    gap: 60px;
  }
  .girl-card {
    width: 230px;
  }
  .girl-card img {
    width: 200px;
    height: 200px;
  }
}

/* Планшет / маленькі ноутбуки 768px–991px */
@media (max-width: 991px) {
  .panel-wrapper {
    padding: 45px 40px;
    gap: 45px;
  }
  .girl-card {
    width: 200px;
  }
  .girl-card img {
    width: 180px;
    height: 180px;
  }
}

/* Телефони 767px і нижче */
@media (max-width: 767px) {
  .panel {
    padding: 0 18px;
  }
  .panel-wrapper {
    flex-direction: column;
    gap: 50px;
    padding: 45px 28px;
    width: 100%;
  }
  .girl-card {
    width: 100%;
  }
  .girl-card img {
    width: 200px;
    height: 200px;
  }
  .vote-btn {
    font-size: 18px;
    padding: 14px 0;
  }
}

/* Дуже маленькі екрани 380px ↓ */
@media (max-width: 380px) {
  .girl-card img {
    width: 170px;
    height: 170px;
  }
  
   }

   @media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px;
    gap: 10px;
  }

  .site-header .left {
    justify-content: center;
    gap: 10px 16px;
  }

  .site-header .left a {
    font-size: 13px;
  }

  .site-header .right {
    justify-content: center;
  }

  .site-header .login-tg {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 15px;
  }
}

/* Дуже вузькі екрани */
@media (max-width: 400px) {
  .site-header .left {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .stats .numbers {
    flex-wrap: wrap;        /* дозволяємо перенос строк */
    row-gap: 24px;
    column-gap: 30px;
  }

  .stats .numbers .stat {
    flex: 0 0 calc(50% - 30px); /* перші 2 – по 50% ширини */
  }

  .stats .numbers .stat:last-child {
    flex-basis: 100%;       /* останнє – на всю ширину, окремим рядом */
  }

  .stats .num {
    font-size: 28px;        /* трохи менші цифри для мобіли */
  }
}