:root{ --grad: linear-gradient(90deg, #e84e8a, #b44eec); }
*{box-sizing:border-box}
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(180deg,#fff6fa,#f3ecff); margin:0; color:#333 }
.container{ max-width:500px; margin:auto; padding:20px }
@media (max-width:420px){ .container{ padding:14px } }

header{ position:sticky; top:0; background:var(--grad); color:#fff; text-align:center; padding:12px; border-radius:0 0 12px 12px; font-weight:700; font-size:16px; box-shadow:0 3px 8px rgba(0,0,0,.15); z-index:10 }
h1{ font-size:26px; color:#b44eec; text-align:center; margin:16px 0 8px; line-height:1.25 }
.benefits-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px 0 }

.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px 0 16px }
.trust div , .benefits-top .pill{ background:#fff; border-radius:8px; padding:5px 5px; font-size:11px; color:#555; box-shadow:0 3px 8px rgba(0,0,0,.08) }
.benefits-top .pill{ border:1px solid #f0e9ff;color:#6b21a8; box-shadow:0 2px 6px #b44eec1a }

.form-box{ background:#fff; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.1); padding:18px; position:relative; overflow:hidden }
label{ display:block; margin-bottom:6px; font-weight:700; color:#555 }
select{ width:100%; padding:12px; min-height: 52px; border-radius:10px; border:1px solid #ddd; font-size:16px }
.btn{ width:100%; min-height: 52px; display: flex; justify-content: center; align-items: center; font-size: 16px !important; padding:12px; border-radius:10px; border:0; font-weight:800; margin-top:12px; background:var(--grad); color:#fff; cursor:pointer; transition:transform .15s ease }
.btn[disabled], .floating-cta[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; filter:grayscale(.1) }

.men-section{ background:#fff; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.1); padding:16px; margin-top:24px; overflow:hidden }
.men-section h2{ text-align:center; color:#b44eec; font-size:18px; margin:0 0 8px }

.man{ display:flex; align-items:center; gap:12px; border-bottom:1px solid #eee; padding:12px 0; transition: transform 0.6s ease; overflow:hidden }
.man:last-child{ border-bottom:none }
.photo{ width:64px; height:64px; flex:0 0 64px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 2px 6px rgba(0,0,0,.1) }
.text{ flex:1; min-width:0 }
.name{ font-weight:800; color:#111; font-size:15px; line-height:1.2 }
.message{ font-size:14px; color:#444; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word }

@media (max-width:420px){
    .men-section{ padding:12px }
    .man{ gap:10px; padding:10px 0 }
    .photo{ width:50px; height:50px; flex:0 0 50px }
    .name{ font-size:14px }
    .message{ font-size:13px }
}

.guarantee{ text-align:center; margin-top:20px; background:#fff; border-radius:12px; padding:14px; box-shadow:0 3px 10px rgba(0,0,0,.08); color:#555; font-size:14px; line-height:1.4; max-width:600px; margin-left:auto; margin-right:auto }
.meta{ font-size:12px; color:#777; text-align:center; margin-top:10px; padding:10px 0 40px; border-top:1px solid #eee; background:#faf7ff; }

.floating-cta{ width: auto; position:fixed; bottom:14px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; border:none; border-radius:999px; padding:14px 22px; font-weight:800; font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.2); cursor:pointer; z-index:50; white-space: nowrap; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:#0b122066; padding:12px; z-index:60 }
.modal.active{ display:grid }
.modal-card{ background:#fff; border-radius:16px; border:1px solid #f1e7ff; box-shadow:0 18px 48px #b44eec33; width:min(92%,480px); padding:18px; text-align:center }
.modal-card h3{ margin:0 0 8px; font-size:18px }
.modal-card p{ margin:0 0 12px; color:#555 }
.modal-actions{ display:flex; gap:10px; justify-content:center }
.btn-secondary{ background:#f3f4f6; color:#111; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; font-weight:700 }
.btn-primary{ background:var(--grad); color:#fff; border:0; border-radius:10px; padding:10px 16px; font-weight:800 }
.searching{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 0; flex-direction: column; }
.spinner{ width:18px; height:18px; border-radius:999px; border:3px solid #eee; border-top-color:#b44eec; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.dots{ display:inline-flex; gap:6px }
.dots i{ width:6px; height:6px; background:#e9d5ff; border-radius:50%; animation:bump 1.2s infinite ease-in-out; display:inline-block }
.dots i:nth-child(2){ animation-delay:.2s }
.dots i:nth-child(3){ animation-delay:.4s }
@keyframes bump{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

.loading-top {
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading-top .text {
    margin-left: 10px;
}


.men-section {
    overflow: hidden;
    height: auto;
}
#men-list {
    overflow-y: hidden;
    position: relative;
}
.man{
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform, opacity;
}

.man.enter{
  opacity: 0;
  transform: translateY(-18px);
}

.men-anim-off .man{
  transition: none !important;
}
.man.exit{
  opacity: 1;
}
.man.exit-active{
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: translateY(89px);
}

@media (max-width: 420px) {
    .man.exit-active{
        transform: translateY(71px);
    }
}

footer {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    background: #fff;
    font-size: 12px;
    border-top: 1px solid #ccc;
}

.footer a {
    color: #777 !important;
    text-decoration: none;
    padding: 0 10px;
}

.logo {
    margin-bottom: 5px;
}
.logo img {
    max-width: 240px;
}
@media screen and (max-width: 767px) {
.logo img {
    max-width: 160px;
}
}