* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #020a2a;
  color: #fff;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== TOP ===== */
.top {
  
  padding-bottom: 40px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
}

.logo img {
  height: 38px;
}

.trust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  opacity: .95;
}

.trust img {
  height: 22px;
}

/* ===== HERO ===== */
.hero {
  text-align: center;
  margin-top: 40px;
}

.hero h1 {
  font-size: 54px;
  line-height: 1.2;
  font-weight: 800;
  font-family: "Sofia Sans", sans-serif !important;
}

.hero h1 span {
  font-style: italic;
}

.quote {
  font-size: 30px;
  font-family: "Sofia Sans", sans-serif !important;
  font-weight: 700 !important;
  margin-top: 22px;
  color: #f5b400;
  
  letter-spacing: .5px;
}

.sub {
  font-family: Montserrat;
    font-style: italic;
    margin-top: 14px;
    font-size: 25px;
    
    font-weight: 500;
    color: white;
}



 .video-wrap {
  width: 100%;
  
  justify-content: center; /* по горизонталі */
}

.video-container {
  width: 100%;
  max-width: 900px; /* як в оригіналах */
}

.video-wrapper {
  width: 100%;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

    /* Блок "людей" над відео */
    .viewers {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(85, 56, 212, 0.85);
      color: #fff;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 10;
      white-space: nowrap;
    }




.after-video {
  margin-top: 50px;
  text-align: center;
  color: #fff;
}

/* ===== WARNING ===== */
.warning-box {
  max-width: 1075px;
  margin: 0 auto 30px;
  background: #efefef;
  color: #111;
  border: 2px dashed #222;
  padding: 18px 20px;
  border-radius: 6px;
  margin-top: 20px;
}

.warning-title {
  text-align: center;
  font-weight: 600;
    margin-bottom: 6px;
    font-size: 33px !important;
    font-family: "Sofia Sans", sans-serif !important;
}
.intro1 {
  text-align: center;
  font-size: 26px;
    font-family: "Sofia Sans", sans-serif !important;
}
/* ===== BUTTON ===== */
.demo-btn {
  display: block;          /* ключове */
  margin: 0 auto 22px;     /* центрує */
  background: #ffcc33;
  color: #000;
  font-weight: 800;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* ===== RATING ===== */
.rating {
  display: flex;
  justify-content: center;
  align-items: center; 
  font-size: 14px;
  color: #fff;
  margin-bottom: 100px;
}

/* ===== AVATARS ===== */
.avatars {
  display: flex;
}

.avatars img {
  width: 120px;
  height: 65px;
  border-radius: 50%; 
}

.avatars img:first-child {
  margin-left: 0;
}

/* ===== RATING TEXT ===== */
.rating-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rating-info strong {
  font-weight: 700;
}

.stars {
  color: #ffcc33;
  letter-spacing: 1px;
}

.rating-text {
  opacity: .9;
}



.reviews {
  padding: 80px 20px;
  background: radial-gradient(circle at top, #2c2f7a 0%, #020a2a 60%);
  
  color: #fff;
}

/* TITLE */
.reviews-title {
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  max-width: 900px;
  margin: 0 auto 36px;
}

.reviews-title .hl {
  color: #ffcc33;
}

/* LOGOS */
.media-logos {
  background: #fff;
  height: 120px;
  padding: 16px 24px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 42px; 
  max-width: 1180px;   /* 🔥 ШИРШЕ */
  margin: 0 auto 44px;
}

.media-logos img {
  height: 40px;        /* 🔥 БІЛЬШІ */
  width: auto;
}

/* CARDS */
.review-cards {
  max-width: 920px;                 /* вужче ніж logos */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* CARD */
.review-card {
  background: #fff;
  border-radius: 10px;
  padding: 26px 28px 24px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* STARS */
.review-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.review-stars span {
  width: 22px;
  height: 22px;
  background: #00b67a;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TEXT */
.review-title {
  font-size: 20px;  
  font-weight: 800;
  margin-bottom: 10px;
  color: #111;
}

.review-text {
  font-size: 18px;
  line-height: 1.6;
  font-style: italic; 
  color: #333;
}

/* AUTHOR */
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4d7dc;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}



.rating-footer {
  background: radial-gradient(circle at center, #2c2f7a 0%, #020a2a 65%);
  padding: 60px 20px 70px;
  color: #fff;
}

.rating-footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* ===== RATING ===== */
.footer-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

..footer-avatars {
  display: flex;
  align-items: center;
}

.footer-avatars img {
  height: 26px;                 /* як в оригіналі */
  width: auto;
  border-radius: 20px;          /* легке заокруглення */
  border: 2px solid #020a2a;    /* темна рамка */
}

.footer-avatars img:first-child {
  margin-left: 0;
}

.footer-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.footer-score strong {
  font-weight: 700;
}

.footer-score .stars {
  color: #ffcc33;
  letter-spacing: 1px;
}

/* ===== TEXT ===== */
.footer-text {
  font-size: 15px;
  margin-bottom: 26px;
  opacity: .95;
}

/* ===== DISCLAIMER ===== */
.footer-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  opacity: .7;
  max-width: 820px;
  margin: 0 auto;
}
.site-footer {
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 18px 20px;
  font-size: 14px;
  color: #555;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT */
.footer-left {
  white-space: nowrap;
}

/* RIGHT */
.footer-right {
  display: flex;
  gap: 18px;
}

.footer-right a {
  color: #555;
  text-decoration: none;
  transition: color .15s ease;
}

.footer-right a:hover {
  color: #000;
}


.wrap{
      max-width:1200px;
      margin:0 auto;
      padding:48px 18px 56px;
      text-align:center;
    }

    h1{
      margin:0;
      font-weight:800;
      letter-spacing:-.02em;
      line-height:1.05;
      font-size:clamp(34px, 4.2vw, 58px);
      text-shadow:0 2px 0 rgba(0,0,0,.18);
    }

    .meta{
      margin-top:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:12px;
      font-weight:700;
      color:var(--muted);
      font-size:clamp(14px, 1.35vw, 20px);
    }
    .meta .item{
      display:flex;
      align-items:center;
      gap:10px;
      white-space:nowrap;
    }
    .meta .sep{
      opacity:.9;
      font-weight:800;
    }

    /* іконки як на скріні (білі + маленький емодзі-колір) */
    .ico{
      width:22px;height:22px;display:inline-block;flex:0 0 22px;
      filter:drop-shadow(0 1px 0 rgba(0,0,0,.2));
    }

    .videoFrame{
      margin:34px auto 0;
      width:min(1050px, 100%);
      border-radius:10px;
      border:1px solid var(--frame-border);
      background:#bdbdbd1a;
      padding:0;
      overflow:hidden;
      box-shadow:0 14px 30px rgba(0,0,0,.25);
    }

    .ratio{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      background:var(--frame);
    }

    /* СЮДИ ставиш своє відео/iframe */
    .ratio iframe,
    .ratio video{
      position:absolute; inset:0;
      width:100%; height:100%;
      border:0;
      display:block;
      background:var(--frame);
    }

    /* (опціонально) плаваюча кнопка чату як справа внизу */
    
.after-video{
  
  padding: 0px 16px 80px;
  color:#fff;
  text-align:center;
  font-family:Inter, system-ui, sans-serif;
}

.chat-info{
  display:inline-block;
  background:#19a9ff;
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.chat-info span{
  font-style:italic;
  opacity:.9;
}

.chat-sub{
  margin:12px 0 36px;
  opacity:.9;
  font-size:15px;
}

.after-title{
  color:#ffc928;
  font-size:clamp(28px, 3vw, 42px);
  font-weight:800;
  margin:0 0 14px;
}

.after-step{
  font-size:clamp(16px, 2vw, 22px);
  font-weight:600;
  margin-bottom:48px;
}

.after-step span{
  color:#ffc928;
}
.reviews-bg{
  margin-top: -192px;           /* 🔑 половина карток */
  height: 153px;
  background:#fff;
  
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  z-index:1;
}
.reviews-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}

.review-card{
  background:#fff;
  color:#222;
  border-radius:8px;
  padding:26px 22px 28px;
  text-align:left;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

.stars{
  color:#00b67a;
  font-size:20px;
  margin-bottom:14px;
  letter-spacing:2px;
}

.review-card p{
  font-family: 'Poppins';
  font-size:18px;
  line-height:1.6;
  margin:0 0 16px;
}

.review-card strong{
  font-size:14px;
}





.step-section{
  
  padding:80px 16px 100px;
  color:#fff;
  text-align:center;
  font-family:Inter, system-ui, sans-serif;
}

.step-wrap{
  max-width:1100px;
  margin:0 auto;
}

.step-title{
  font-size:clamp(26px, 3vw, 40px);
  font-weight:800;
  margin:0 0 18px;
}

.step-title span{
  color:#ffc928;
}

.step-desc{
  max-width:900px;
  margin:0 auto 60px;
  font-size:17px;
  line-height:1.6;
  opacity:.95;
}

.step-image{
  display:flex;
  justify-content:center;
}

.step-image img{
  max-width:720px;
  width:100%;
  }


.step3{
 
  padding:80px 16px 100px;
  color:#fff;
  font-family:Inter, system-ui, sans-serif;
}

.step3-wrap{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.step3-title{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:800;
  line-height:1.35;
  margin:0 0 22px;
}

.step3-title span{
  color:#ffc928;
}

.step3-sub{
  color:#ffc928;
  font-weight:700;
  font-size:18px;
  margin-bottom:40px;
}

.step3-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:center;
}

/* ПЛАШКА: фіксована ширина, як в оригіналі */
.step3-row{
  position:relative;
  width:880px;                 /* 🔥 ключ: НЕ 100% */
  max-width:calc(100% - 32px); /* щоб влазило на моб */
  background:#fff;
  border-radius:10px;
  padding:18px 34px 18px 86px; /* 🔥 зліва місце під чек */
  text-align:center;           /* 🔥 текст по центру як в оригіналі */
  box-shadow:none;             /* в оригіналі тінь мінімальна/нема */
}

/* ТЕКСТ */
.step3-row p{
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:#0b0b0b;
  text-align: justify;
}

/* ЧЕКБОКС: абсолютний, іконка як в оригіналі */
.step3-check{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:3px;           /* 🔥 майже квадрат */
  background:#1f3fae;
}

/* Малюємо галочку “як на скріні” (не текстова ✓) */
.step3-check::after{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  width:7px;
  height:12px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(40deg);
}
.results-stars{
  color:#ffb400;
  font-size:40px;
  letter-spacing:6px;
  margin-bottom:18px;
  margin-top: 60px;
}

/* TITLE */
.results-title{
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:800;
  margin:0 0 36px;
}

/* BOX */
.results-box{
  max-width:720px;
  margin:0 auto;
  padding:28px 32px;
  border:1px solid rgba(255,255,255,.35); /* 🔑 тонка рамка */
  border-radius:10px;
}

/* TEXT */
.results-box p{
  margin:0;
  font-size:16px;
  line-height:1.6;
}

.results-box p + p{
  margin-top:18px;
}

/* HIGHLIGHT NUMBERS */
.results-box strong{
  color:#ffc928;
  font-weight:800;
}

.volume-block{
  padding:80px 16px 40px;
  color:#ffffff; /* якщо фон темний */
  font-family:Inter, system-ui, sans-serif;
}

.volume-wrap{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

/* TITLE */
.volume-title{
  font-size:clamp(26px, 3vw, 40px);
  font-weight:800;
  line-height:1.25;
  margin:0 0 26px;
}

.volume-title span{
  color:#ffc928;
}

/* QUESTION */
.volume-question{
  font-size:18px;
  font-weight:700;
  margin-bottom:22px;
}

/* TEXT */
.volume-text{
  max-width:760px;
  margin:0 auto 50px;
  font-size:16px;
  line-height:1.6;
  opacity:.95;
}

/* IMAGE */
.volume-image{
  display:flex;
  justify-content:center;
}

.volume-image img{
  max-width:720px;
  width:100%;
  border-radius:16px;
  
}
/* ===== FREE CALL BLOCK ===== */
.free-call{
  padding:80px 16px 100px;
  color:#ffffff;
  font-family:Inter, system-ui, sans-serif;
}

.free-wrap{
  max-width:900px;
  margin:0 auto;
}

/* TITLE */
.free-title{
  font-size:clamp(24px, 2.8vw, 38px);
  font-weight:800;
  line-height:1.25;
  margin:0 0 30px;
}

.free-title span{
  color:#ffc928;
}

.free-title strong{
  font-weight:900;
}

/* TEXT */
.free-text{
  font-size:16px;
  line-height:1.65;
  margin-bottom:22px;
  opacity:.95;
}

/* ACCENT WORDS */
.accent{
  color:#ffc928;
  font-weight:800;
}

/* ===== FOOTER ===== */
.site-footer{
  background:#ffffff;
  color:#333;
  font-family:Inter, system-ui, sans-serif;
  font-size:14px;
  border-top:1px solid #e6e6e6;
}

.footer-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:22px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.footer-left{
  opacity:.85;
}

.footer-right{
  display:flex;
  gap:18px;
}

.footer-right a{
  color:#333;
  text-decoration:none;
  opacity:.85;
}

.footer-right a:hover{
  opacity:1;
  text-decoration:underline;
}
.seen-box{
 
  margin:0 auto;
  background:#ffffff;
  
  padding:34px 24px 40px;
  text-align:center;
}

/* VISTO SU */
.seen-title{
  margin:0 0 26px;
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:#111;
}

/* логотипи */
.seen-logos{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}

/* самі логотипи */
.seen-logos img{
  max-height:42px;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  
}





/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .trust {
    display: none;
  }
	.reviews {
		padding: 0px;
	}
  .hero h1 {
    font-size: 30px;
  }

  .sub {
    font-size: 16px;
  }

  .top-bar {
    flex-direction: column;
    gap: 15px;
  }
  .after-video {
    margin-top: 35px;
    padding: 0 14px;
  }

  /* WARNING */
  .warning-box {
    max-width: 100%;
    padding: 14px 14px;
    font-size: 14px;
  }

  .warning-title {
    font-size: 14px;
  }

  /* BUTTON */
  .demo-btn {
    padding: 14px 28px;
    font-size: 15px;
    margin-bottom: 16px;
  }

  /* RATING */
  .rating {
    flex-wrap: wrap;              /* 🔥 дозволяємо перенос */
    gap: 6px;
    font-size: 13px;
  }

  /* AVATARS — КЛЮЧОВЕ */
  .avatars img {
    width: 120px;                  /* 🔥 як в оригіналі */
    height: 60px;
    margin-left: -8px;
  }

  .rating-text {
    white-space: normal;
    text-align: center;
    font-size: 21px;
  }
   .reviews-title {
    font-size: 26px;
    text-align: center;
  }

  .review-cards {
    grid-template-columns: 1fr;
  }

  .media-logos {
    gap: 18px;
  }

  .media-logos img {
    height: 40px;
  }
   .media-logos {
   	height: auto;
    max-width: 100%;
    gap: 18px;
  }

  .review-cards {
    max-width: 100%;
  }
  .review-cards {
  	padding: 10px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-rating {
    flex-direction: column;
    gap: 6px;
  }

  .footer-text {
    font-size: 14px;
  }

  .footer-disclaimer {
    font-size: 11px;
  }
  .footer-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-left {
    white-space: normal;
  }

  .footer-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  step3-row{
    width:100%;
    padding:16px 16px 16px 64px;
    border-radius:10px;
  }
  .step3-check{
    left:16px;
    width:26px;
    height:26px;
  }
  .step3-check::after{
    left:8px;
    top:5px;
    width:7px;
    height:12px;
  }
  .step3 {
    padding: 0px;
  }
  .step3-row p{ 
    font-size:15px;
     }
     .results-box{
    padding:22px 18px;
  }

  .results-box p{
    font-size:15px;
  }

  .results-stars{
    font-size:24px;
  }
  .free-call{
    padding:60px 14px 70px;
  }

  .free-text{
    font-size:15px;
  }

  .footer-wrap{
    flex-direction:column;
    text-align:center;
  }

  .footer-right{
    flex-wrap:wrap;
    justify-content:center;
  }
  .volume-block{
    padding:60px 14px 20px;
  }

  .volume-text{
    font-size:15px;
    margin-bottom:36px;
  }

  .volume-image img{
    border-radius:12px;
  }
  .reviews-grid{
    grid-template-columns:1fr;
    background-color: white;    
  }
  .review-card{
    max-width:520px;
    margin:0 auto;
  }
  .reviews-bg {
    display: none;
  }
  .after-video {
    padding: 0px;
  } 
  .step-desc{
    font-size:15px;
    margin-bottom:40px;
  }

  .step-image img{
    max-width:100%;
    border-radius:14px;
  }
  .seen-logos{
    justify-content:center;
    gap:22px 28px;
  }

  .seen-logos img{
    max-height:34px;
  }
  .intro1 {
    font-size: 14px;
  }
  .wrap{padding:34px 14px 44px}
      .meta{gap:10px}
      .meta .sep{display:none}
      .meta .item{width:100%; justify-content:center}
      .videoFrame{margin-top:22px}


}