:root{ --bg-overlay: rgba(0,0,0,.45) }
body{ font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif }
main{
  background: url(img/background.jpg) no-repeat center center fixed;
  background-size: cover;
  overflow-x: hidden;
  color: #000;
}
.btn-neon{ background:linear-gradient(45deg,#ff3cac,#784ba0,#2b86c5); padding:12px 32px; font-weight:700; border-radius:9999px; box-shadow:0 0 5px #ff3cac,0 0 15px #784ba0,0 0 30px #2b86c5; transition:transform .25s ease, box-shadow .25s ease; color:#fff; display:inline-block ; font-size: 12px}
.btn-neon:hover{ transform:scale(1.05); box-shadow:0 0 15px #ff3cac,0 0 25px #784ba0,0 0 45px #2b86c5 }
/* ==== Tinder-like swipe styles ==== */
.tinder-wrap{ position:relative; width:320px; height:460px; margin-inline:auto }
.card{ width:300px; height:420px; position:absolute; left:10px; top:20px; border-radius:24px; cursor:grab; user-select:none; padding:24px; box-sizing:border-box; box-shadow:0 10px 25px rgba(0,0,0,.4); transition:transform .3s ease, opacity .3s ease; display:flex; flex-direction:column; justify-content:space-between; background:rgba(255 255 255 / .12); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px) }
.card h3{ font-size:1.25rem; font-weight:700; margin-bottom:.5rem }
.card p{ font-size:.95rem; line-height:1.4; flex-grow:1; color:#000 }
.reviews-container{ position:relative; width:320px; height:260px; margin:0 auto }
.review-card{ position:absolute; width:350px; height:295px; border-radius:20px; background:rgba(255 255 255 / .12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 32px rgba(0,0,0,.25); padding:24px; box-sizing:border-box; color:#000; user-select:none; cursor:grab; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s ease, opacity .3s ease }
.review-card p{ font-style:italic; font-size:1rem; line-height:1.5; flex-grow:1 }
.review-author{ display:flex; align-items:center; gap:16px; margin-top:16px }
.review-author img{ width:48px; height:48px; border-radius:50%; border:2px solid #fff; object-fit:cover }
.tracking-tight{
  color: #fff;
}
.font-extrabold{
  color: #fff;
}
.underline{
  color: #fff;
}
.glass{
  /* background: rgba(255, 255, 255, .78); */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 10px 30px rgba(31, 55, 86, .12);
  border-radius: 9999px;
}
.box-1{
  padding: 20px;
  border-radius: 10px;
}
.box-2{
  display: flex;padding: 100px;align-items: center;justify-content: center;
}
.box-3 {
  margin: 100px;
  border-radius: 20px;
  padding: 20px;                   /* расстояние между двумя блоками */
}
.swipe-t{
  margin-left: 100px !important;
  margin-right: 100px !important;
}
@media (max-width: 767px) {
/* Родитель: сверху карточки, снизу событие */
.box-2 {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 24px 16px;           /* было 100px — компактнее на мобилке */
  gap: 24px;                    /* расстояние между двумя блоками */
}
.box-3 {
  margin: 10px;
  border-radius: 20px;
  padding: 20px;     
  margin-top: 50px;              /* расстояние между двумя блоками */
}
.swipe-t{
  margin-left:auto !important;
  margin-right: auto !important;
}

}
.footer{
background: #484848;
}
.body1{
background: #f6f4f7;
}

/* ===== Улучшенные стили (из демо) ===== */
html { scroll-behavior: smooth; }

@media (pointer: fine) {
  body, body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ff3cac'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 12 12, auto; }
  a, button, [role="button"], .btn-neon, .btn-neon-premium, .card, .review-card { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='%23784ba0'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 14 14, pointer; }
}

.cta-strip { position: relative; }
.btn-light { background: rgba(255,255,255,.95) !important; color: #784ba0 !important; box-shadow: 0 4px 20px rgba(0,0,0,.2) !important; }
.btn-light:hover { background: #fff !important; box-shadow: 0 6px 30px rgba(0,0,0,.25) !important; }

.section-alt { background: rgba(255,255,255,.4); }
main section:nth-child(odd):not(.cta-strip) { background: transparent; }
main section:nth-child(even):not(.cta-strip) { background: rgba(0,0,0,.02); }

.stat-card { border-radius: 16px !important; }

.section-how { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.section-how .swipe-t { margin: 0 auto; }

.hero-title-gradient {
  background: linear-gradient(135deg, #fff 0%, #ffd4e5 25%, #e0c3fc 50%, #89cff0 75%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
}
@keyframes gradient-shift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }

.hero-title-glow { filter: drop-shadow(0 0 20px rgba(255,182,193,.6)) drop-shadow(0 0 40px rgba(147,112,219,.3)); }

.scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #ff3cac, #784ba0, #2b86c5); z-index: 9999; transition: width 80ms linear; }

.cursor-glow-spot { position: fixed; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,60,172,.12) 0%, rgba(120,75,160,.06) 30%, transparent 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: opacity .3s; }

.btn-neon-premium { position: relative; background: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5); padding: 14px 36px; font-weight: 700; border-radius: 9999px; color: #fff; display: inline-block; font-size: 14px; border: none; box-shadow: 0 0 10px rgba(255,60,172,.4), 0 0 25px rgba(120,75,160,.3); transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease; overflow: visible; }
.btn-neon-premium::before { content: ''; position: absolute; inset: -2px; border-radius: 9999px; padding: 2px; background: linear-gradient(135deg, #ff3cac, #89cff0, #784ba0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.8; }
.btn-neon-premium:hover { box-shadow: 0 0 25px rgba(255,60,172,.6), 0 0 50px rgba(120,75,160,.4); }

.nav-link-animated { position: relative; }
.nav-link-animated::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, #ff3cac, #8b5cf6); transition: width .3s ease; }
.nav-link-animated:hover::after { width: 100%; }