/* SoulmateForMe.net — Clean & Light */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#2d2d2d;
  background:#fafaf9;
  -webkit-font-smoothing:antialiased
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Navigation ---------- */
.nav-desktop{
  display:flex;justify-content:center;align-items:center;gap:28px;
  padding:14px 0;background:#fff;
  border-bottom:1px solid #f0f0f0;
  position:sticky;top:0;z-index:10
}
.nav-desktop a{
  font-size:0.85rem;font-weight:500;color:#777;
  transition:color 0.2s;letter-spacing:0.2px
}
.nav-desktop a:hover{color:#111}
.nav-desktop .nav-blog{
  font-size:0.75rem;font-weight:400;color:#aaa;
  margin-left:8px;padding-left:14px;border-left:1px solid #e8e8e8
}
.nav-desktop .nav-blog:hover{color:#666}

/* ---------- Main Header ---------- */
.main-header{
  text-align:center;padding:64px 20px 40px;
  background:#fff
}
.main-header h1{font-size:2rem;font-weight:700;color:#1a1a1a;margin-bottom:8px;line-height:1.3}
.main-header p{max-width:560px;margin:0 auto 0;font-size:1.05rem;color:#777;line-height:1.6}

.page-hero{
  text-align:center;padding:48px 20px 24px;
  background:#fff
}
.page-hero h1{font-size:1.7rem;font-weight:700;color:#1a1a1a}
.page-hero + .section{margin-top:0}

/* ---------- CTA Button ---------- */
.cta-button{
  display:inline-block;margin-top:28px;
  padding:14px 36px;background:#1a1a1a;color:#fff;
  border-radius:8px;font-size:1rem;font-weight:600;
  transition:background 0.2s,transform 0.15s
}
.cta-button:hover{background:#333;transform:translateY(-1px)}

/* ---------- Sections ---------- */
.section{padding:48px 20px;text-align:center;background:#fafaf9}
.section:nth-child(even){background:#fff}

h2{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:8px}

/* ---------- Feature Grid ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;max-width:960px;margin:32px auto 0
}
.feature-box{
  background:#fff;padding:24px 20px;border-radius:10px;
  border:1px solid #f0f0f0;
  transition:border-color 0.2s,box-shadow 0.2s
}
.feature-box:hover{
  border-color:#e0e0e0;
  box-shadow:0 2px 12px rgba(0,0,0,0.04)
}
.feature-box h3{font-size:1rem;font-weight:600;margin-bottom:6px;color:#1a1a1a}
.feature-box p{font-size:0.9rem;color:#777;line-height:1.5}
.feature-box a{
  display:inline-block;margin-top:10px;
  font-size:0.8rem;font-weight:600;color:#555
}
.feature-box a:hover{color:#111}

/* ---------- Divider ---------- */
.divider{text-align:center;padding:16px 0;color:#ddd;font-size:1rem;letter-spacing:6px}

/* ---------- Content Pages ---------- */
.content-page{max-width:660px;margin:40px auto;padding:0 20px}
.content-page h1{font-size:1.8rem;font-weight:700;margin-bottom:16px;color:#1a1a1a;text-align:center}
.content-page h2{font-size:1.2rem;margin:28px 0 8px;text-align:left;font-weight:600}
.content-page p{margin-bottom:14px;line-height:1.7;color:#444;font-size:1rem}
.content-page ul{margin-bottom:14px;padding-left:22px}
.content-page li{margin-bottom:6px;line-height:1.6;color:#555}

/* ---------- Blog Page ---------- */
.blog-list{max-width:660px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.blog-card{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;background:#fff;
  border:1px solid #f0f0f0;border-radius:10px;
  transition:border-color 0.2s
}
.blog-card:hover{border-color:#ddd}
.blog-card h3{font-size:1rem;font-weight:600;margin:0;color:#1a1a1a}
.blog-card .blog-date{font-size:0.75rem;color:#aaa;white-space:nowrap}

/* ---------- Footer ---------- */
footer{
  text-align:center;padding:36px 20px;
  font-size:0.8rem;color:#aaa;
  border-top:1px solid #f0f0f0;
  background:#fafaf9
}
footer a{color:#999;margin:0 10px;font-size:0.8rem}
footer a:hover{color:#444}
footer p{margin-top:10px}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  .main-header h1{font-size:1.5rem}
  .main-header{padding:48px 16px 32px}
  .page-hero h1{font-size:1.3rem}
  .features{grid-template-columns:1fr;gap:14px}
  .nav-desktop{gap:16px;padding:10px 0;flex-wrap:wrap}
  .nav-desktop a{font-size:0.8rem}
  .nav-desktop .nav-blog{margin-left:0;padding-left:0;border-left:none}
}