/* =========================================================
   HOME PAGE FINAL UI POLISH - Desktop first, mobile safe
   This file is loaded after style.css and responsive.css.
========================================================= */
:root{
  --bm-pink:#f51b63;
  --bm-pink-dark:#d90859;
  --bm-ink:#111827;
  --bm-muted:#5f6775;
  --bm-soft:#fff1f6;
  --bm-line:#f4d7e2;
  --bm-shadow:0 18px 45px rgba(17,24,39,.08);
  --bm-shadow-lg:0 28px 80px rgba(245,27,99,.12);
}

body{background:#fff;color:var(--bm-ink);}
.home-page .container,.container{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;}

/* Header */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,27,99,.08);box-shadow:0 8px 25px rgba(15,23,42,.04);}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.site-logo-img{width:104px!important;height:auto!important;object-fit:contain;display:block;}
.menu{display:flex;align-items:center;gap:24px;flex:1;justify-content:flex-end;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{font-weight:700;font-size:14px;color:#151821;text-decoration:none;padding:29px 0 24px;border-top:4px solid transparent;transition:.2s ease;}
.nav-links a:hover,.nav-links a.active{color:var(--bm-pink);border-top-color:var(--bm-pink);}
.nav-account{display:flex;align-items:center;gap:10px;}
.message-icon-link,.notification-icon-link,.profile-icon-link,.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e7e9ef;background:#fff;color:#111827;text-decoration:none;box-shadow:0 8px 24px rgba(15,23,42,.04);}
.message-icon-link:hover,.notification-icon-link:hover,.profile-icon-link:hover{border-color:var(--bm-pink);color:var(--bm-pink);}
.notification-count{top:2px!important;right:2px!important;background:var(--bm-pink)!important;}

/* Hero */
.hero{padding:92px 0 112px;background:radial-gradient(circle at 18% 12%,#fff 0,#fff5f8 28%,#ffeaf2 72%,#fff 100%);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.18fr);gap:74px;align-items:center;}
.hero-content{max-width:560px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#fff;color:var(--bm-pink);font-weight:800;font-size:14px;box-shadow:0 12px 28px rgba(245,27,99,.10);margin-bottom:24px;}
.hero-badge:before{content:"♥";font-size:12px;}
.hero h1{font-size:clamp(54px,5vw,76px);line-height:1.02;letter-spacing:-1.6px;margin:0 0 22px;font-weight:900;color:#10131a;}
.hero h1 span{color:var(--bm-pink);}
.hero p{font-size:20px;line-height:1.75;color:#263140;max-width:530px;margin:0 0 28px;}
.hero-actions{display:flex;gap:16px;align-items:center;margin:0 0 24px;}
.btn{min-height:46px;border-radius:10px;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;text-decoration:none;border:1px solid var(--bm-pink);background:linear-gradient(135deg,var(--bm-pink),var(--bm-pink-dark));color:#fff;box-shadow:0 12px 26px rgba(245,27,99,.16);transition:.2s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(245,27,99,.24);}
.btn.outline,.outline{background:#fff!important;color:var(--bm-pink)!important;box-shadow:none;border-color:var(--bm-pink)!important;}
.hero-trust{display:flex;gap:12px;align-items:center;color:#1f2937;font-size:15px;margin-bottom:24px;}
.hero-trust span:first-child{color:var(--bm-pink);}
.hero-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:460px;}
.hero-mini-stats>div{background:#fff;border:1px solid rgba(245,27,99,.06);border-radius:14px;padding:17px 20px;box-shadow:var(--bm-shadow);}
.hero-mini-stats b{display:block;font-size:22px;line-height:1;color:#111827;margin-bottom:6px;}
.hero-mini-stats span{font-size:12px;color:var(--bm-muted);}
.hero-image{position:relative;}
.hero-image img{width:100%;height:480px;object-fit:cover;border-radius:26px;display:block;box-shadow:var(--bm-shadow-lg);}
.hero-image:after{content:"Verified Profiles";position:absolute;left:24px;bottom:22px;background:#fff;color:var(--bm-pink);font-weight:900;border-radius:999px;padding:14px 20px;box-shadow:0 18px 40px rgba(15,23,42,.14);}

/* Search box */
.search-box{position:relative;margin-top:-70px;z-index:4;background:#fff;border:1px solid rgba(245,27,99,.10);border-radius:22px;padding:30px 34px;box-shadow:0 28px 70px rgba(15,23,42,.10);}
.search-title-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;}
.search-title-row h3{font-size:28px;margin:0;font-weight:900;letter-spacing:-.4px;}
.search-title-row span{color:#222;font-size:14px;}
.form-grid{display:grid;grid-template-columns:1.15fr .8fr .8fr 1fr 1.2fr 1fr;gap:16px;align-items:end;}
.field label{display:block;font-weight:900;font-size:12px;color:#111827;margin-bottom:9px;}
.field select,.field input{width:100%;height:52px;border:1px solid #f0b9ca;border-radius:10px;background:#fff;color:#111827;padding:0 16px;outline:none;}
.field select:focus,.field input:focus{border-color:var(--bm-pink);box-shadow:0 0 0 4px rgba(245,27,99,.08);}
.search-btn{width:100%;height:52px;}
.popular-searches{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:18px;font-size:13px;align-items:center;}
.popular-searches a{font-weight:900;color:var(--bm-pink);text-decoration:none;}

/* Sections */
.stats-section,.why-section,.premium-members-section,.for-you-section,.success-preview,.cta-section{padding:58px 0;}
.section-title{font-size:38px;line-height:1.15;font-weight:900;letter-spacing:-.7px;margin:0 0 18px;text-align:center;color:#111827;}
.section-title span{color:var(--bm-pink);}
.section-subtitle{text-align:center;margin:-6px 0 28px;color:var(--bm-muted);}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;}
.left-title,.left-subtitle{text-align:left!important;margin-left:0!important;}
.section-head-row .btn{min-width:112px;height:42px;min-height:42px;}

/* Stats + why cards */
.stats,.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.stat,.card{background:#fff;border:1px solid #eef0f5;border-radius:16px;box-shadow:var(--bm-shadow);padding:34px 28px;min-height:170px;}
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat-icon,.icon{width:54px;height:54px;border-radius:50%;background:#ffe5ef;color:var(--bm-pink);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:23px;}
.stat b{font-size:32px;line-height:1.1;margin-bottom:8px;}
.stat p,.card p{color:#4b5563;line-height:1.65;margin:0;font-size:14px;}
.card h3{font-size:18px;margin:0 0 12px;font-weight:900;}
.why-section .card{text-align:left;min-height:230px;}
.why-section .icon{margin-left:0;}

/* Profile sections - fill width properly with actual dynamic cards */
.premium-members-section{padding-top:70px;}
.for-you-section{background:#fff7fa;}
#premiumMembers.profile-scroll,#forYouMembers.profile-scroll,.profile-scroll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px!important;overflow:visible!important;scrollbar-width:none;}
.profile-scroll .profile-card{width:100%!important;max-width:none!important;min-width:0!important;display:grid!important;grid-template-columns:44% 1fr;background:#fff;border:1px solid #f2d4df;border-radius:20px;overflow:hidden;box-shadow:0 22px 55px rgba(245,27,99,.10);transition:.2s ease;}
.profile-scroll .profile-card:hover{transform:translateY(-4px);}
.profile-scroll .premium-lock-image,.profile-scroll .locked-img-wrap{height:100%;min-height:250px;}
.profile-scroll .profile-card img{width:100%!important;height:100%!important;min-height:250px;object-fit:cover;display:block;}
.premium-lock-body{padding:24px!important;display:flex;flex-direction:column;justify-content:center;gap:16px;background:linear-gradient(135deg,#fff,#fff2f7);}
.premium-info-list{margin:0!important;}
.premium-info-row{min-height:96px;border:1px solid #f5c8d8;background:#fff7fa;border-radius:16px;padding:16px!important;display:grid!important;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;text-align:left!important;}
.premium-info-row .info-icon{grid-row:1/3;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffe4ee;}
.premium-info-row strong{font-size:18px;}
.premium-info-row span:last-child{color:#596273;font-size:13px;line-height:1.45;}
.premium-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin:0!important;}
.premium-actions .btn{width:100%;height:42px;min-height:42px;padding:0 10px;font-size:13px;}
.premium-unlock-btn{width:100%;height:48px;min-height:48px;}
.premium-privacy{display:none!important;}

/* Success stories */
.success-preview .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.story-card{background:#fff;border:1px solid #edf0f5;border-radius:16px;overflow:hidden;box-shadow:var(--bm-shadow);display:flex;flex-direction:column;}
.story-card img{width:100%;height:220px;object-fit:cover;display:block;}
.story-card .body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.story-card h3{font-size:22px;margin:0;font-weight:900;}
.story-card p{color:#4b5563;line-height:1.6;margin:0;flex:1;}
.story-card .btn{align-self:flex-start;height:42px;min-height:42px;}

/* CTA + footer */
.cta{background:#ffe4ee;border-radius:18px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.cta h2{font-size:28px;margin:0 0 8px;font-weight:900;}
.cta p{margin:0;color:#4b5563;}
.footer{background:#101010;color:#fff;padding:58px 0 24px;margin-top:30px;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:60px;align-items:start;}
.footer a{display:block;color:#fff;text-decoration:none;margin:11px 0;}
.footer p{color:#e5e7eb;line-height:1.65;max-width:330px;padding-left: 20px;padding-right: 20px;}
.footer h3{margin:0 0 14px;font-size:18px;}
.footer-logo-img{width:160px!important;background:#fff;margin-bottom:14px;}
.footer .btn{display:inline-flex;margin-right:8px;margin-top:8px;height:40px;min-height:40px;padding:0 18px;}
@media (max-width:768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width:1023px){
  .hero{padding:54px 0 88px;}
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero h1{font-size:46px;}
  .hero p{font-size:17px;}
  .hero-image img{height:360px;}
  .search-box{margin-top:-50px;padding:24px;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats,.grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #premiumMembers.profile-scroll,#forYouMembers.profile-scroll,.profile-scroll{grid-template-columns:1fr!important;}
  .success-preview .grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:680px){
  .container{padding-left:16px;padding-right:16px;}
  .nav{min-height:68px;}
  .mobile-toggle{display:inline-flex!important;}
  .menu{display:none;position:absolute;left:16px;right:16px;top:72px;background:#fff;border:1px solid #f2d4df;border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.12);padding:16px;flex-direction:column;align-items:stretch;}
  .menu.show{display:flex;}
  .nav-links,.nav-account{flex-direction:column;align-items:stretch;gap:8px;}
  .nav-links a{padding:12px;border-top:0;border-radius:10px;}
  .hero{padding:36px 0 72px;}
  .hero h1{font-size:38px;}
  .hero-actions,.hero-trust,.search-title-row,.section-head-row,.cta{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-mini-stats{grid-template-columns:1fr;}
  .hero-image img{height:280px;border-radius:20px;}
  .search-box{border-radius:18px;padding:20px;margin-top:-42px;}
  .form-grid,.stats,.grid,.footer-grid{grid-template-columns:1fr;}
  .section-title{font-size:30px;}
  .profile-scroll .profile-card{display:block!important;}
  .profile-scroll .premium-lock-image,.profile-scroll .locked-img-wrap,.profile-scroll .profile-card img{height:260px!important;min-height:260px!important;}
  .premium-lock-body{padding:20px!important;}
}

/* =========================================================
   HOME PAGE MOBILE FINAL PASS
   UI-only responsive fixes: no backend/API/form logic touched.
========================================================= */
@media (max-width: 768px){
  html,body{overflow-x:hidden;}
  body{font-size:15px;}
  .container{width:100%;max-width:100%;padding-left:15px!important;padding-right:15px!important;}

  /* compact mobile header */
  .topbar{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.98);}
  .nav{min-height:64px!important;padding-top:8px;padding-bottom:8px;position:relative;}
  .site-logo-img{width:86px!important;max-height:48px;object-fit:contain;}
  .mobile-toggle{width:42px!important;height:42px!important;border-radius:12px!important;font-size:22px!important;box-shadow:0 8px 22px rgba(15,23,42,.08)!important;}
  .menu{left:15px!important;right:15px!important;top:68px!important;max-height:calc(100vh - 86px);overflow:auto;border-radius:18px!important;padding:14px!important;}
  .nav-links a{font-size:15px!important;font-weight:800!important;}
  .nav-account .btn{width:100%;height:44px;min-height:44px;}
  .nav-account{display:grid!important;grid-template-columns:1fr 1fr 44px 44px 44px;align-items:center;gap:8px!important;}
  .message-icon-link,.notification-icon-link,.profile-icon-link{width:44px!important;height:44px!important;}
  .user-box{grid-column:1/-1;}

  /* hero mobile */
  .hero{padding:30px 0 64px!important;background:linear-gradient(180deg,#fff6f9 0%,#ffeef4 65%,#fff 100%)!important;}
  .hero-grid{display:flex!important;flex-direction:column!important;gap:24px!important;}
  .hero-content{max-width:100%;text-align:left;}
  .hero-badge{font-size:12px!important;padding:9px 13px!important;margin-bottom:16px!important;}
  .hero h1{font-size:34px!important;line-height:1.08!important;letter-spacing:-.8px!important;margin-bottom:14px!important;}
  .hero p{font-size:15.5px!important;line-height:1.65!important;margin-bottom:20px!important;}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:11px!important;margin-bottom:16px!important;}
  .hero-actions .btn{height:48px!important;min-height:48px!important;font-size:14px!important;border-radius:12px!important;}
  .hero-trust{display:flex!important;flex-wrap:wrap!important;gap:7px 9px!important;font-size:13px!important;margin-bottom:16px!important;}
  .hero-mini-stats{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;max-width:100%!important;}
  .hero-mini-stats>div{padding:12px 8px!important;border-radius:13px!important;text-align:center;}
  .hero-mini-stats b{font-size:17px!important;}
  .hero-mini-stats span{font-size:10.5px!important;}
  .hero-image{width:100%;}
  .hero-image img{height:235px!important;border-radius:20px!important;box-shadow:0 18px 48px rgba(245,27,99,.14)!important;}
  .hero-image:after{left:14px!important;bottom:14px!important;padding:10px 14px!important;font-size:12px!important;}

  /* search card */
  .search-box{margin-top:-34px!important;padding:18px!important;border-radius:18px!important;box-shadow:0 18px 45px rgba(15,23,42,.10)!important;}
  .search-title-row{display:block!important;margin-bottom:16px!important;}
  .search-title-row h3{font-size:22px!important;margin-bottom:4px!important;}
  .search-title-row span{font-size:12px!important;color:#6b7280!important;}
  .form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .form-grid .field:first-child,.form-grid .field:nth-child(4),.form-grid .field:nth-child(5),.form-grid .field:last-child{grid-column:1/-1;}
  .field label{font-size:11px!important;margin-bottom:7px!important;}
  .field select,.field input{height:46px!important;border-radius:11px!important;font-size:14px!important;padding:0 12px!important;}
  .search-btn{height:48px!important;min-height:48px!important;}
  .popular-searches{gap:8px!important;margin-top:14px!important;font-size:12px!important;}
  .popular-searches strong{width:100%;}
  .popular-searches a{background:#fff3f7;border:1px solid #ffd4e1;border-radius:999px;padding:7px 10px;}

  /* sections/cards */
  .stats-section,.why-section,.premium-members-section,.for-you-section,.success-preview,.cta-section{padding:38px 0!important;}
  .section-title{font-size:26px!important;line-height:1.18!important;margin-bottom:12px!important;}
  .section-subtitle{font-size:14px!important;line-height:1.55!important;margin:0 0 22px!important;}
  .stats{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .stat{min-height:138px!important;padding:20px 10px!important;border-radius:15px!important;}
  .stat-icon,.icon{width:44px!important;height:44px!important;font-size:20px!important;margin-bottom:10px!important;}
  .stat b{font-size:22px!important;}
  .stat p,.card p{font-size:13px!important;line-height:1.5!important;}
  .grid{grid-template-columns:1fr!important;gap:14px!important;}
  .card{min-height:auto!important;padding:22px!important;border-radius:16px!important;}
  .why-section .card{text-align:left!important;}
  .why-section .icon{margin-left:0!important;}
  .card h3{font-size:17px!important;margin-bottom:8px!important;}

  /* profile sections */
  .section-head-row{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin-bottom:18px!important;}
  .left-title{font-size:25px!important;margin-bottom:7px!important;}
  .left-subtitle{font-size:13px!important;margin:0!important;}
  .section-head-row .btn{height:38px!important;min-height:38px!important;min-width:auto!important;padding:0 13px!important;font-size:12px!important;white-space:nowrap;}
  #premiumMembers.profile-scroll,#forYouMembers.profile-scroll,.profile-scroll{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;}
  .profile-scroll .profile-card{display:block!important;border-radius:18px!important;overflow:hidden!important;}
  .profile-scroll .premium-lock-image,.profile-scroll .locked-img-wrap,.profile-scroll .profile-card img{height:240px!important;min-height:240px!important;}
  .premium-lock-body{padding:16px!important;gap:12px!important;}
  .premium-info-row{min-height:auto!important;padding:12px!important;border-radius:14px!important;grid-template-columns:38px 1fr!important;}
  .premium-info-row .info-icon{width:36px!important;height:36px!important;}
  .premium-info-row strong{font-size:16px!important;}
  .premium-actions{grid-template-columns:1fr!important;gap:8px!important;}
  .premium-actions .btn,.premium-unlock-btn{height:44px!important;min-height:44px!important;font-size:13px!important;}

  /* success/CTA/footer */
  .story-card img{height:190px!important;}
  .story-card .body{padding:18px!important;}
  .story-card h3{font-size:19px!important;}
  .cta{display:block!important;padding:24px 20px!important;text-align:left!important;border-radius:18px!important;}
  .cta h2{font-size:23px!important;line-height:1.22!important;}
  .cta p{font-size:14px!important;margin-bottom:17px!important;}
  .cta .btn{width:100%;height:48px!important;}
  .footer{padding:38px 0 22px!important;margin-top:10px!important;}
  .footer-grid{grid-template-columns:1fr!important;gap:22px!important;}
  .footer-logo-img{width:130px!important;}
  .footer h3{font-size:16px!important;margin-bottom:8px!important;}
  .footer a{margin:8px 0!important;font-size:14px!important;}
  .footer p{font-size:14px!important;}
}

@media (max-width: 420px){
  .hero h1{font-size:31px!important;}
  .hero-mini-stats{gap:7px!important;}
  .hero-mini-stats>div{padding:10px 5px!important;}
  .form-grid{grid-template-columns:1fr!important;}
  .form-grid .field{grid-column:1/-1!important;}
  .stats{grid-template-columns:1fr!important;}
  .section-head-row{flex-direction:column!important;align-items:stretch!important;}
  .section-head-row .btn{width:100%;}
  .nav-account{grid-template-columns:1fr 1fr 42px 42px 42px!important;}
}

/* =========================================================
   MOBILE PROFILE ROW FIX
   Premium Members + Matches For You are horizontal swipe rows.
   CSS-only: keeps backend/API/button links untouched.
========================================================= */
@media (max-width: 768px) {
  .premium-members-section,
  .for-you-section {
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .premium-members-section .container,
  .for-you-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }

  .premium-members-section .section-head-row,
  .for-you-section .section-head-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .premium-members-section .section-head-row > div,
  .for-you-section .section-head-row > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .premium-members-section .section-title,
  .for-you-section .section-title,
  .premium-members-section .left-title,
  .for-you-section .left-title {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    word-spacing: normal !important;
    letter-spacing: -0.3px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
  }

  .premium-members-section .section-title span,
  .for-you-section .section-title span,
  .premium-members-section .left-title span,
  .for-you-section .left-title span {
    display: inline !important;
    margin-left: 4px !important;
  }

  .premium-members-section .section-subtitle,
  .for-you-section .section-subtitle,
  .premium-members-section .left-subtitle,
  .for-you-section .left-subtitle {
    text-align: left !important;
    max-width: 230px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .premium-members-section .section-head-row .btn,
  .for-you-section .section-head-row .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 74px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
    border-radius: 9px !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
  }

  #premiumMembers.profile-scroll,
  #forYouMembers.profile-scroll,
  .premium-members-section .profile-scroll,
  .for-you-section .profile-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 10px 16px 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #premiumMembers.profile-scroll::-webkit-scrollbar,
  #forYouMembers.profile-scroll::-webkit-scrollbar,
  .premium-members-section .profile-scroll::-webkit-scrollbar,
  .for-you-section .profile-scroll::-webkit-scrollbar {
    display: none !important;
  }

  #premiumMembers.profile-scroll,
  #forYouMembers.profile-scroll,
  .premium-members-section .profile-scroll,
  .for-you-section .profile-scroll {
    scrollbar-width: none !important;
  }

  #premiumMembers.profile-scroll > .profile-card,
  #forYouMembers.profile-scroll > .profile-card,
  .premium-members-section .profile-scroll > .profile-card,
  .for-you-section .profile-scroll > .profile-card {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
  }

  .profile-card.premium-lock-card {
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .12) !important;
  }

  .profile-card.premium-lock-card .premium-lock-image,
  .premium-lock-image,
  .locked-img-wrap {
    height: 185px !important;
    min-height: 185px !important;
    flex: 0 0 185px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .profile-card.premium-lock-card .premium-lock-body,
  .premium-lock-body {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin-top: -18px !important;
    padding: 24px 14px 16px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .profile-card.premium-lock-card .premium-title-row,
  .premium-title-row {
    grid-template-columns: 34px 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .profile-card.premium-lock-card .avatar-icon,
  .avatar-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .profile-card.premium-lock-card h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .profile-card.premium-lock-card .premium-info-list,
  .premium-info-list {
    gap: 8px !important;
  }

  .profile-card.premium-lock-card .premium-info-row,
  .premium-info-row {
    grid-template-columns: 32px 1fr !important;
    min-height: 58px !important;
    padding: 10px !important;
    gap: 9px !important;
    border-radius: 12px !important;
  }

  .profile-card.premium-lock-card .premium-info-row .info-icon,
  .premium-info-row .info-icon,
  .info-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .profile-card.premium-lock-card .premium-info-row strong,
  .premium-info-row strong {
    font-size: 13px !important;
  }

  .profile-card.premium-lock-card .premium-info-row span,
  .premium-info-row span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .profile-card.premium-lock-card .premium-info-row em,
  .premium-info-row em {
    display: none !important;
  }

  .profile-card.premium-lock-card .premium-actions,
  .premium-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .profile-card.premium-lock-card .btn,
  .premium-actions .btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }

  .profile-card.premium-lock-card .premium-unlock-btn,
  .premium-unlock-btn {
    min-height: 42px !important;
    height: 42px !important;
    margin-top: 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  .premium-pill {
    top: 12px !important;
    padding: 7px 10px !important;
    font-size: 9.5px !important;
  }

  .new-pill { left: 10px !important; }
  .member-pill { right: 10px !important; left: auto !important; }

  .profile-card.premium-lock-card .premium-match,
  .premium-match {
    margin-top: 8px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 420px) {
  .premium-members-section .section-head-row,
  .for-you-section .section-head-row {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .premium-members-section .section-head-row .btn,
  .for-you-section .section-head-row .btn {
    width: auto !important;
  }

  #premiumMembers.profile-scroll > .profile-card,
  #forYouMembers.profile-scroll > .profile-card,
  .premium-members-section .profile-scroll > .profile-card,
  .for-you-section .profile-scroll > .profile-card {
    flex-basis: 245px !important;
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
  }

  .profile-card.premium-lock-card .premium-lock-image,
  .premium-lock-image,
  .locked-img-wrap {
    height: 175px !important;
    min-height: 175px !important;
    flex-basis: 175px !important;
  }
}

/* =========================================================
   EMERGENCY MOBILE ROW FIX - keep Premium + Matches in ONE swipe row
   CSS-only. This overrides earlier mobile/grid rules.
========================================================= */
@media (max-width: 768px) {
  .premium-members-section,
  .for-you-section {
    padding: 32px 0 !important;
    overflow: hidden !important;
  }

  .premium-members-section .container,
  .for-you-section .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .premium-members-section .section-head-row,
  .for-you-section .section-head-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
  }

  .premium-members-section .section-head-row > div,
  .for-you-section .section-head-row > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 96px) !important;
  }

  .premium-members-section .left-title,
  .for-you-section .left-title {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.4px !important;
    word-spacing: 0 !important;
    white-space: normal !important;
  }

  .premium-members-section .left-title span,
  .for-you-section .left-title span {
    display: inline !important;
    margin-left: 4px !important;
    word-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .premium-members-section .left-subtitle,
  .for-you-section .left-subtitle {
    width: 100% !important;
    max-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .premium-members-section .section-head-row .btn,
  .for-you-section .section-head-row .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 74px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  body #premiumMembers.profile-scroll,
  body #forYouMembers.profile-scroll,
  body .premium-members-section #premiumMembers.horizontal-scroll.profile-scroll,
  body .for-you-section #forYouMembers.horizontal-scroll.profile-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    width: calc(100vw - 0px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 8px 16px 22px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  body #premiumMembers.profile-scroll::-webkit-scrollbar,
  body #forYouMembers.profile-scroll::-webkit-scrollbar { display: none !important; height: 0 !important; }

  body #premiumMembers.profile-scroll > article.profile-card,
  body #forYouMembers.profile-scroll > article.profile-card,
  body #premiumMembers.profile-scroll > .profile-card,
  body #forYouMembers.profile-scroll > .profile-card {
    display: block !important;
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(17,24,39,.12) !important;
  }

  body #premiumMembers.profile-scroll > .empty-state,
  body #forYouMembers.profile-scroll > .empty-state {
    flex: 0 0 calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
  }

  body #premiumMembers.profile-scroll .premium-lock-image,
  body #premiumMembers.profile-scroll .locked-img-wrap,
  body #forYouMembers.profile-scroll .premium-lock-image,
  body #forYouMembers.profile-scroll .locked-img-wrap {
    width: 100% !important;
    height: 172px !important;
    min-height: 172px !important;
    max-height: 172px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body #premiumMembers.profile-scroll .profile-card img,
  body #forYouMembers.profile-scroll .profile-card img {
    width: 100% !important;
    height: 172px !important;
    min-height: 172px !important;
    max-height: 172px !important;
    object-fit: cover !important;
  }

  body #premiumMembers.profile-scroll .premium-lock-body,
  body #forYouMembers.profile-scroll .premium-lock-body {
    padding: 14px !important;
    margin: 0 !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  body #premiumMembers.profile-scroll .premium-info-row,
  body #forYouMembers.profile-scroll .premium-info-row {
    min-height: 62px !important;
    padding: 10px !important;
    grid-template-columns: 32px 1fr !important;
    border-radius: 12px !important;
  }

  body #premiumMembers.profile-scroll .premium-actions,
  body #forYouMembers.profile-scroll .premium-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body #premiumMembers.profile-scroll .premium-actions .btn,
  body #forYouMembers.profile-scroll .premium-actions .btn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 10.5px !important;
    padding: 0 6px !important;
  }

  body #premiumMembers.profile-scroll .premium-unlock-btn,
  body #forYouMembers.profile-scroll .premium-unlock-btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  body #premiumMembers.profile-scroll > article.profile-card,
  body #forYouMembers.profile-scroll > article.profile-card,
  body #premiumMembers.profile-scroll > .profile-card,
  body #forYouMembers.profile-scroll > .profile-card {
    flex-basis: 218px !important;
    width: 218px !important;
    min-width: 218px !important;
    max-width: 218px !important;
  }
}

/* =========================================================
   DESKTOP PROFILE ROW FIX
   Premium Members + Matches For You stay in ONE horizontal row
   on webpage too. CSS-only; no backend/JS changes.
========================================================= */
@media (min-width: 769px) {
  .premium-members-section,
  .for-you-section {
    overflow: hidden !important;
  }

  body #premiumMembers.profile-scroll,
  body #forYouMembers.profile-scroll,
  body .premium-members-section #premiumMembers.horizontal-scroll.profile-scroll,
  body .for-you-section #forYouMembers.horizontal-scroll.profile-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 28px !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 2px 24px 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  body #premiumMembers.profile-scroll > article.profile-card,
  body #forYouMembers.profile-scroll > article.profile-card,
  body #premiumMembers.profile-scroll > .profile-card,
  body #forYouMembers.profile-scroll > .profile-card {
    flex: 0 0 calc((100% - 28px) / 2) !important;
    width: calc((100% - 28px) / 2) !important;
    min-width: 500px !important;
    max-width: 560px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }

  body #premiumMembers.profile-scroll > .empty-state,
  body #forYouMembers.profile-scroll > .empty-state {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO + OVERFLOW PATCH
   Fixes cropped hero/header on phone widths and keeps profile rows swipeable.
   CSS-only. No backend/JS/API changes.
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar,
  .hero,
  .search-box,
  section,
  footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container,
  .home-page .container,
  .hero-grid,
  .hero .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  .hero-content,
  .hero-badge,
  .hero h1,
  .hero p,
  .hero-actions,
  .hero-trust,
  .hero-mini-stats,
  .hero-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hero h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .hero p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-actions .btn,
  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-mini-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .hero-mini-stats::-webkit-scrollbar { display: none !important; }

  .hero-mini-stats > div {
    flex: 0 0 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }

  /* remove 100vw negative-margin overflow that caused page cropping */
  body #premiumMembers.profile-scroll,
  body #forYouMembers.profile-scroll,
  body .premium-members-section #premiumMembers.horizontal-scroll.profile-scroll,
  body .for-you-section #forYouMembers.horizontal-scroll.profile-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 0 22px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .premium-members-section .container,
  .for-you-section .container {
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 28px !important; }
  .hero-badge { font-size: 11px !important; padding: 8px 10px !important; }
}

/* =========================================================
   FINAL PROFILE IMAGE MOBILE PATCH
   Keeps member photos from looking zoomed/cropped badly in
   Premium Members + Matches For You horizontal rows.
========================================================= */
@media (max-width: 768px) {
  body #premiumMembers.profile-scroll > .profile-card,
  body #forYouMembers.profile-scroll > .profile-card,
  body #premiumMembers.profile-scroll > article.profile-card,
  body #forYouMembers.profile-scroll > article.profile-card {
    flex: 0 0 245px !important;
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
  }

  body #premiumMembers.profile-scroll .premium-lock-image,
  body #premiumMembers.profile-scroll .locked-img-wrap,
  body #forYouMembers.profile-scroll .premium-lock-image,
  body #forYouMembers.profile-scroll .locked-img-wrap,
  body #premiumMembers.profile-scroll .premium-lock-image-link,
  body #forYouMembers.profile-scroll .premium-lock-image-link {
    width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    display: block !important;
    overflow: hidden !important;
  }

  body #premiumMembers.profile-scroll .profile-card img,
  body #forYouMembers.profile-scroll .profile-card img {
    width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

@media (max-width: 380px) {
  body #premiumMembers.profile-scroll > .profile-card,
  body #forYouMembers.profile-scroll > .profile-card,
  body #premiumMembers.profile-scroll > article.profile-card,
  body #forYouMembers.profile-scroll > article.profile-card {
    flex-basis: 232px !important;
    width: 232px !important;
    min-width: 232px !important;
    max-width: 232px !important;
  }
}

/* =========================================================
   FINAL MOBILE COMPACT ROW PATCH
   Stats + Why Choose stay in one clean horizontal swipe row.
   CSS-only: no JS/backend/API changes.
========================================================= */
@media (max-width: 768px) {
  .stats-section,
  .why-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .stats-section .container,
  .why-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  .stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 14px 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .stats::-webkit-scrollbar {
    display: none !important;
  }

  .stats .stat {
    flex: 0 0 142px !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    min-height: 132px !important;
    padding: 18px 10px !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
  }

  .stats .stat-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .stats .stat b {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }

  .stats .stat p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .why-section .section-title {
    text-align: left !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
  }

  .why-section .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 16px 0 !important;
    margin: 0 !important;
  }

  .why-section .grid::-webkit-scrollbar {
    display: none !important;
  }

  .why-section .grid .card {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    min-height: 190px !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
  }

  .why-section .card .icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .why-section .card h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
  }

  .why-section .card p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  .stats .stat {
    flex-basis: 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  .why-section .grid .card {
    flex-basis: 176px !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
  }
}

/* =========================================================
   EMERGENCY MOBILE CLEANUP PATCH - final
   1) Hero mini stats are normal 3-column row again (no scroll)
   2) Main stats remain compact horizontal row
   3) Why Choose title is two clean lines and spacing reduced
   CSS-only: backend/JS untouched.
========================================================= */
@media (max-width: 768px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero {
    padding-top: 34px !important;
    padding-bottom: 26px !important;
  }

  .hero-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto 14px auto !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .hero-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-mini-stats > div {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    padding: 12px 6px !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  .hero-mini-stats b {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .hero-mini-stats span {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .stats-section {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
    margin: 0 !important;
  }

  .stats-section .stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 16px 12px 16px !important;
    margin: 0 !important;
    scroll-snap-type: x proximity !important;
  }

  .stats-section .stats::-webkit-scrollbar {
    display: none !important;
  }

  .stats-section .stat {
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    min-height: 128px !important;
    padding: 16px 8px !important;
    scroll-snap-align: start !important;
  }

  .stats-section .stat-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 9px !important;
  }

  .stats-section .stat b {
    font-size: 21px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .stats-section .stat p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .why-section {
    padding-top: 18px !important;
    padding-bottom: 34px !important;
    margin: 0 !important;
  }

  .why-section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .why-section .section-title {
    display: block !important;
    text-align: left !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .why-section .section-title span {
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
  }

  .why-section .grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 14px 0 !important;
    margin: 0 !important;
    scroll-snap-type: x proximity !important;
  }

  .why-section .grid::-webkit-scrollbar {
    display: none !important;
  }

  .why-section .grid .card {
    flex: 0 0 184px !important;
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    min-height: 210px !important;
    padding: 20px 16px !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
  }

  .why-section .card h3 {
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }

  .why-section .card p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  .stats-section .stat {
    flex-basis: 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }

  .why-section .section-title,
  .why-section .section-title span {
    font-size: 25px !important;
  }

  .why-section .grid .card {
    flex-basis: 174px !important;
    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;
  }
}

/* =========================================================
   FINAL MOBILE HEADER + SUCCESS TITLE FIX
   1) Success Stories centered as one heading
   2) Mobile navbar logo larger, clear, and centered
   CSS-only; no backend/JS changes.
========================================================= */
@media (max-width: 768px) {
  .topbar .nav {
    min-height: 86px !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 8px 16px !important;
  }

  .topbar .brand-logo,
  .topbar .logo {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .topbar .site-logo-img {
    width: 138px !important;
    max-width: 138px !important;
    height: auto !important;
    max-height: 72px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .topbar .mobile-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 23px !important;
    z-index: 3 !important;
  }

  .topbar .menu {
    top: 92px !important;
  }

  .success-preview {
    padding-top: 34px !important;
  }

  .success-preview .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .success-preview .section-title span {
    display: inline !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .success-preview .section-subtitle {
    text-align: center !important;
    margin: 0 auto 22px !important;
    max-width: 310px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  .topbar .site-logo-img {
    width: 126px !important;
    max-width: 126px !important;
  }

  .success-preview .section-title {
    font-size: 26px !important;
  }
}

/* FINAL FIX: remove duplicate hero image badge text on desktop/mobile */
.hero-image::before {
  content: none !important;
  display: none !important;
}

.hero-image::after {
  content: "Verified Profiles" !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   GLOBAL MOBILE NAVBAR FIX
   Scope: mobile only. Keeps desktop/backend/logic untouched.
   Makes hamburger left, logo centered, menu same on all pages.
========================================================= */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .topbar {
    height: 80px !important;
    min-height: 80px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(236, 72, 153, 0.13) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .topbar .container.nav,
  .topbar .nav,
  header.topbar .container.nav {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 52px 1fr 52px !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .topbar .mobile-toggle,
  header.topbar .mobile-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 23px !important;
    color: #e91e63 !important;
    background: #fff7fb !important;
    border: 1px solid #ffd2e3 !important;
    box-shadow: 0 8px 22px rgba(233, 30, 99, 0.12) !important;
    z-index: 3 !important;
  }

  .topbar .brand-logo,
  .topbar .logo,
  header.topbar .brand-logo,
  header.topbar .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    height: 62px !important;
    min-height: 0 !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .topbar .site-logo-img,
  header.topbar .site-logo-img,
  .site-logo-img {
    width: auto !important;
    max-width: 142px !important;
    height: 70px !important;
    max-height: 70px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .topbar .menu,
  header.topbar .menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 28px 20px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(236, 72, 153, 0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    z-index: 9998 !important;
    overflow: visible !important;
  }

  .topbar .menu.show,
  header.topbar .menu.show {
    display: flex !important;
  }

  .topbar .nav-links,
  header.topbar .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .topbar .nav-links a,
  header.topbar .nav-links a {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .topbar .nav-links a.active,
  header.topbar .nav-links a.active {
    color: #e91e63 !important;
  }

  .topbar .nav-account,
  header.topbar .nav-account {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 4px !important;
    flex-wrap: wrap !important;
  }

  .topbar .message-icon-link,
  .topbar .notification-icon-link,
  .topbar .profile-icon-link,
  header.topbar .message-icon-link,
  header.topbar .notification-icon-link,
  header.topbar .profile-icon-link {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
  }

  .topbar .login-link,
  .topbar .register-link,
  header.topbar .login-link,
  header.topbar .register-link {
    min-height: 44px !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 390px) {
  .topbar .container.nav,
  .topbar .nav,
  header.topbar .container.nav {
    padding: 0 14px !important;
    grid-template-columns: 50px 1fr 50px !important;
  }

  .topbar .site-logo-img,
  header.topbar .site-logo-img,
  .site-logo-img {
    max-width: 132px !important;
    height: 60px !important;
    max-height: 60px !important;
  }

  .topbar .mobile-toggle,
  header.topbar .mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* FINAL FIX: mobile hamburger bottom icons horizontal */
@media (max-width: 768px) {
  header.topbar nav.menu.show .nav-account,
  .topbar nav.menu.show .nav-account {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
  }

  header.topbar nav.menu.show .nav-account > a,
  .topbar nav.menu.show .nav-account > a {
    display: flex !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex: 0 0 56px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header.topbar nav.menu.show .nav-account .login-link,
  header.topbar nav.menu.show .nav-account .register-link,
  header.topbar nav.menu.show .nav-account .user-box,
  .topbar nav.menu.show .nav-account .login-link,
  .topbar nav.menu.show .nav-account .register-link,
  .topbar nav.menu.show .nav-account .user-box {
    display: none !important;
  }
}

/* Admin link visibility safety fix: mobile menu CSS uses display: block !important,
   so keep Admin hidden unless session.js confirms the logged-in user is an admin. */
.admin-nav-link:not(.is-admin-visible),
.topbar .nav-links a.admin-nav-link:not(.is-admin-visible),
header.topbar .nav-links a.admin-nav-link:not(.is-admin-visible) {
  display: none !important;
}

.admin-nav-link[hidden] {
  display: none !important;
}

/* =========================================================
   HOME MOBILE HERO + SEARCH OVERLAP FIX
   Keeps hero image and Find Your Match card separated on phones.
========================================================= */
@media (max-width: 768px) {
  body .hero {
    padding-bottom: 28px !important;
  }

  body .hero-grid {
    gap: 18px !important;
  }

  body .hero-image {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
  }

  body .hero-image img {
    display: block !important;
    width: 100% !important;
    height: 232px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body .hero-image::after {
    z-index: 2 !important;
    max-width: calc(100% - 28px) !important;
    white-space: nowrap !important;
  }

  body .hero + .container,
  body .hero + div.container {
    position: relative !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
    background: #fff !important;
  }

  body .search-box {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 0 !important;
    padding: 20px 18px 22px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body .search-title-row {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  body .search-title-row h3 {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 25px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.4px !important;
    color: #101828 !important;
  }

  body .search-title-row span {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #667085 !important;
  }

  body .search-box .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body .search-box .field,
  body .search-box .form-grid .field {
    grid-column: auto !important;
    width: 100% !important;
  }

  body .search-box .field label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #101828 !important;
    margin-bottom: 8px !important;
  }

  body .search-box select,
  body .search-box input {
    width: 100% !important;
    height: 56px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  body .search-box .search-btn {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
  }
}

/* Keep home page using the same global mobile nav behavior as every page. */
@media (max-width: 768px) {
  header.topbar nav.menu.show .nav-account,
  .topbar nav.menu.show .nav-account {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
  }
}

/* =========================================================
   HOME NAVBAR DESKTOP ALIGNMENT FIX
   Purpose: make home.html navbar match Search/Membership pages.
   Scope: desktop/tablet only. No JS, API, logic, or mobile menu changes.
========================================================= */
@media (min-width: 769px) {
  header.topbar,
  .topbar {
    height: 86px !important;
    min-height: 86px !important;
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(245, 27, 99, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  header.topbar .container.nav,
  .topbar .container.nav,
  .topbar .nav {
    height: 86px !important;
    min-height: 86px !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    position: relative !important;
  }

  header.topbar .brand-logo,
  header.topbar .logo,
  .topbar .brand-logo,
  .topbar .logo {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    min-width: 205px !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header.topbar .site-logo-img,
  .topbar .site-logo-img,
  .site-logo-img {
    width: 230px !important;
    max-width: 230px !important;
    height: 68px !important;
    max-height: 68px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  header.topbar .mobile-toggle,
  .topbar .mobile-toggle {
    display: none !important;
  }

  header.topbar .menu,
  .topbar .menu {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  header.topbar .nav-links,
  .topbar .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 22px !important;
  }

  header.topbar .nav-links a,
  .topbar .nav-links a {
    position: relative !important;
    padding: 0 !important;
    border-top: 0 !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  header.topbar .nav-links a.active,
  header.topbar .nav-links a:hover,
  .topbar .nav-links a.active,
  .topbar .nav-links a:hover {
    color: var(--primary, #e91e63) !important;
  }

  header.topbar .nav-links a.active::after,
  header.topbar .nav-links a:hover::after,
  .topbar .nav-links a.active::after,
  .topbar .nav-links a:hover::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -12px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--primary, #e91e63) !important;
    border: 0 !important;
  }

  header.topbar .nav-account,
  .topbar .nav-account {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  header.topbar .message-icon-link,
  header.topbar .notification-icon-link,
  header.topbar .profile-icon-link,
  .topbar .message-icon-link,
  .topbar .notification-icon-link,
  .topbar .profile-icon-link {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    border: 1px solid #e7e9ef !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  }

  header.topbar .message-icon-link:hover,
  header.topbar .notification-icon-link:hover,
  header.topbar .profile-icon-link:hover,
  .topbar .message-icon-link:hover,
  .topbar .notification-icon-link:hover,
  .topbar .profile-icon-link:hover {
    border-color: var(--primary, #e91e63) !important;
    color: var(--primary, #e91e63) !important;
  }
}

@media (max-width: 768px) {
  .footer .footer-grid {
    width: calc(100% - 28px) !important;
    padding: 38px 0 32px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 22px !important;
  }

  .footer .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .footer .footer-logo-img {
    width: 150px !important;
    height: 68px !important;
  }

  .footer .footer-brand p {
    font-size: 13px !important;
  }

  .footer .footer-column {
    align-items: flex-start !important;
  }

  .footer .footer-column h3 {
    font-size: 16px !important;
  }

  .footer .footer-column a {
    font-size: 13px !important;
    margin-bottom: 11px !important;
  }

  .footer .footer-bottom {
    padding: 20px 14px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
}