:root{
  --coral:#f08a7b; --coral-dark:#e07a6a; --green:#6db38c; --green-dark:#4f9b73;
  --orange:#f0a868; --pink:#f4dada; --ink:#2a2a2a; --muted:#5a5a5a; --bg:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block}
.wrap{width:min(1100px,calc(100% - 40px));margin:auto}
a{text-decoration:none;color:inherit}
h2{font-family:'Lora',serif;font-weight:600;font-size:34px;line-height:1.3}
.btn{display:inline-block;padding:13px 28px;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:.25s;text-align:center}
.btn-coral{background:#e3533d;color:#fff}.btn-coral:hover{background:var(--coral-dark)}
.btn-coral-outline{background:transparent;color:#fff;border:2px solid #fff}.btn-coral-outline:hover{background:#fff;color:var(--coral)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark)}
.btn-green-outline{background:transparent;color:var(--green);border:2px solid var(--green)}.btn-green-outline:hover{background:var(--green);color:#fff}
.btn-white{background:#e3533d;color:#ffffff}.btn-white:hover{background:#f5f5f5}

/* ============== TOP NAV ============== */
.topnav{background:#2c2c2c;color:#fff;padding:14px 0;position:sticky;top:0;z-index:50}
.topnav-inner{width:min(1100px,calc(100% - 40px));margin:auto;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:'Lora',serif;font-weight:700;font-size:22px}
.brand img{width:24px}
.topnav nav{display:flex;gap:24px;margin-left:auto}
.topnav nav a{font-size:13px;color:#cfcfcf;transition:.2s}.topnav nav a:hover{color:#fff}
.topnav-cta{display:flex;align-items:center;gap:18px}
.login{font-size:13px;color:#fff}.login:hover{color:var(--coral)}
.topnav-cta .btn{padding:10px 22px;font-size:13px}

/* ============== HERO ============== */
.hero{background:linear-gradient(#2a2a2aa3, #2a2a2a75),url('../img/banner.jpg') center/cover;padding:120px 0 130px;text-align:center;color:#fff}
.hero h1{font-family:'Lora',serif;font-size:64px;font-weight:600;margin-bottom:18px}
.hero-sub{font-size:19px;margin-bottom:14px;font-weight:500}
.hero-desc{max-width:640px;margin:0 auto 35px;font-size:15px;opacity:.95}
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ============== BENEFITS ============== */
.benefits{background:#f4ece1;color:var(--ink);padding:80px 0;text-align:center}
.benefits h2{font-size:32px;margin-bottom:14px}
.benefits .lead{max-width:680px;margin:0 auto 50px;font-size:14.5px;color:var(--muted)}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.benefit{padding:14px}
.b-icon{width:60px;height:60px;border-radius:50%;background:rgba(106,76,60,.12);display:grid;place-items:center;margin:0 auto 18px}
.b-icon img{width:30px;filter:brightness(0) saturate(100%) invert(58%) sepia(35%) saturate(900%) hue-rotate(320deg) brightness(98%) contrast(90%)}
.benefit h3{font-family:'Lora',serif;font-size:20px;margin-bottom:10px}
.benefit p{font-size:13.5px;color:var(--muted);line-height:1.8}

/* ============== HOW ============== */
.how{padding:90px 0;background:#fff}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.two-col.reverse{direction:rtl}.two-col.reverse>*{direction:ltr}
.how-photo{height:380px;border-radius:6px;background:url('../img/elite-singles-dating-app.jpg') center/cover}
.how-copy h2{margin-bottom:18px}
.how-copy p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.cta-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

/* ============== SERVICES (orange) ============== */
.services{background:var(--orange);color:#fff;padding:80px 0}
.srv-copy h2{font-size:32px;margin-bottom:18px}
.srv-copy p{font-size:14.5px;margin-bottom:14px;opacity:.95}
.srv-photo{height:380px;border-radius:6px;background:url('../img/elite-singles-dating-site.jpg') center/cover}
.services .btn-green{background:#fff;color:var(--orange)}.services .btn-green:hover{background:#f7f7f7}

/* ============== MATURE (green) ============== */
.mature{background:var(--green);color:#fff;padding:80px 0}
.mat-photo{height:380px;border-radius:6px;background:url('../img/elite-singles-dating.jpg') center/cover}
.mat-copy h2{font-size:32px;margin-bottom:18px}
.mat-copy p{font-size:14.5px;margin-bottom:14px;opacity:.95}
.mature .btn-coral{background:#fff;color:var(--green)}.mature .btn-coral:hover{background:#f7f7f7}

/* ============== NEW PLACE (light pink) ============== */
.newplace{background:var(--pink);color:var(--ink);padding:80px 0}
.np-copy h2{font-size:30px;margin-bottom:18px}
.np-copy p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.np-photo{height:380px;border-radius:6px;background:url('../img/elite-singles-login.jpg') center/cover}

/* ============== QUOTE STRIP ============== */
.quote-strip{background:var(--coral);color:#fff;padding:55px 0;text-align:center}
.q-mark{font-family:'Lora',serif;font-size:70px;line-height:.5;display:block;margin-bottom:15px;opacity:.7}
.quote-text{max-width:780px;margin:0 auto 25px;font-size:18px;line-height:1.7;font-style:italic}
.quote-dots{display:flex;justify-content:center;gap:8px}
.quote-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)}
.quote-dots .active{background:#fff}

/* ============== REVIEWS ============== */
.reviews{padding:85px 0 70px;background:#fff;text-align:center}
.reviews h2{margin-bottom:55px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.review{padding:10px}
.rv-photo{width:80px;height:80px;border-radius:50%;margin:0 auto 18px;background-size:cover;background-position:center}
.rv-1{background-image:url('../img/user_review1.jpg')}
.rv-2{background-image:url('../img/user_review2.jpg')}
.rv-3{background-image:url('../img/user_review3.jpg')}
.review h4{font-family:'Lora',serif;font-size:18px;margin-bottom:6px}
.stars{color:#f1b54a;letter-spacing:2px;margin-bottom:12px;font-size:14px}
.review p{color:var(--muted);font-size:13.5px;line-height:1.8}

/* ============== WHY CHOOSE US ============== */
.why{padding:80px 0;background:#fafafa;text-align:center}
.why h2{margin-bottom:55px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.why-card{padding:30px 18px;background:#fff;border-radius:6px;transition:.25s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 14px 35px rgba(0,0,0,.08)}
.w-icon{font-size:30px;color:var(--coral);margin-bottom:14px}
.why-card h4{font-family:'Lora',serif;font-size:17px;margin-bottom:10px}
.why-card p{color:var(--muted);font-size:13px;line-height:1.8}

/* ============== FAQ ============== */
.faq{padding:90px 0;background:#fafafa;text-align:center}
.faq h2{margin-bottom:45px}
.faq-grid{max-width:820px;margin:0 auto;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faq details{background:#fff;border-radius:6px;padding:18px 22px;box-shadow:0 6px 18px rgba(0,0,0,.04);transition:.2s}
.faq details[open]{box-shadow:0 10px 28px rgba(0,0,0,.08)}
.faq summary{cursor:pointer;font-family:'Lora',serif;font-size:16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--coral);font-size:22px;line-height:1;font-weight:400;transition:.2s}
.faq details[open] summary::after{content:'−'}
.faq details p{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.8}

/* ============== JOIN BANNER ============== */
.join{background:var(--coral);color:#fff;padding:80px 0;text-align:center}
.join h2{font-size:34px;margin-bottom:14px}
.join p{max-width:640px;margin:0 auto 28px;font-size:14.5px;opacity:.95}

/* ============== FOOTER ============== */
.footer{background:#2c2c2c;color:#cfcfcf;padding:30px 0 25px}
.foot-top{width:min(1100px,calc(100% - 40px));margin:auto;display:flex;align-items:center;gap:30px}
.brand.light{color:#fff;font-family:'Lora',serif}
.foot-top nav{margin-left:auto;display:flex;gap:22px}
.foot-top nav a{font-size:13px}.foot-top nav a:hover{color:#fff}
.foot-copy{text-align:center;margin-top:20px;font-size:12px;color:#888}

/* ============== RESPONSIVE ============== */
@media(max-width:880px){
  .topnav nav{display:none}
  .topnav-inner{gap:14px}
  .hero h1{font-size:42px}
  .benefits-grid,.reviews-grid{grid-template-columns:1fr;gap:30px}
  .faq-grid{grid-template-columns:1fr}
  .two-col,.two-col.reverse{grid-template-columns:1fr;direction:ltr;gap:35px}
  .how-photo,.srv-photo,.mat-photo,.np-photo{height:260px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{flex-wrap:wrap}
  .foot-top nav{margin-left:0;flex-wrap:wrap}
}
@media(max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .topnav-cta .login{display:none}
}