/* ==========================================================================
   Loverian — modern dating site (SFW). Romantic rose + violet, warm & premium.
   ========================================================================== */
:root{
  --rose:#FF3D71; --rose-d:#E62E5C; --plum:#7C3AED; --plum-d:#6D28D9;
  --ink:#241021; --muted:#7A6A76; --line:#F3E1EA;
  --bg:#FFFDFC; --cream:#FFF4F8; --card:#FFFFFF;
  --radius:16px; --radius-lg:26px; --maxw:1180px;
  --shadow:0 20px 48px rgba(120,20,60,.14); --shadow-sm:0 6px 18px rgba(120,20,60,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Poppins',sans-serif;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0}
.serif{font-family:'Playfair Display',Georgia,serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.section{padding:84px 0}
.eyebrow{display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);background:#FFE4EC;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.center{text-align:center}
.sec-head{max-width:640px;margin:0 auto 48px}
.sec-head h2{font-size:clamp(28px,4.2vw,42px)}
.sec-head p{color:var(--muted);font-size:17px;margin:14px 0 0}
.grad{background:linear-gradient(100deg,var(--rose),var(--plum));-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;padding:14px 28px;border:0;border-radius:999px;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s,background .18s;white-space:nowrap}
.btn-primary{background:var(--rose);color:#fff;box-shadow:0 12px 26px rgba(255,61,113,.35)}
.btn-primary:hover{background:var(--rose-d);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--rose);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-3px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose)}
.btn-lg{padding:16px 34px;font-size:16px}

/* header */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,253,252,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
.hdr.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.hdr-in{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;color:var(--ink)}
.brand .heart{width:30px;height:30px;background:linear-gradient(135deg,var(--rose),var(--plum));border-radius:8px;display:grid;place-items:center;color:#fff;font-size:15px}
.nav{display:flex;gap:6px;margin-left:10px}
.nav a{font-weight:600;font-size:15px;color:#4a3a44;padding:8px 14px;border-radius:9px;transition:.2s}
.nav a:hover{color:var(--rose);background:#FFE4EC}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr-cta .login{font-weight:600;color:#4a3a44;padding:8px 12px}
.hdr-cta .login:hover{color:var(--rose)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(800px 420px at 85% -10%,rgba(124,58,237,.20),transparent 60%),
  radial-gradient(720px 420px at 0% 110%,rgba(255,61,113,.16),transparent 55%),
  linear-gradient(160deg,#fff,#FFF4F8);padding:70px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--plum-d);background:#F3E9FF;border:1px solid #E4D4FF;padding:7px 15px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:clamp(38px,5.6vw,62px);color:var(--ink)}
.hero p.lead{font-size:19px;color:var(--muted);margin:22px 0 28px;max-width:520px}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--muted);font-size:14px}
.avatars{display:flex}
.avatars span{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background:linear-gradient(135deg,var(--rose),var(--plum));display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.avatars span:first-child{margin-left:0}
/* hero visual — phone card stack */
.hero-visual{position:relative;height:440px}
.match-card{position:absolute;width:230px;background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.match-card .photo{height:180px;background:linear-gradient(135deg,var(--rose),var(--plum));position:relative}
.match-card .photo .ini{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:52px;opacity:.9}
.match-card .info{padding:14px 16px}
.match-card .info b{font-family:'Poppins',sans-serif;font-size:17px}
.match-card .info span{color:var(--muted);font-size:13px;display:block}
.match-card .tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:#0BA57D;background:#E7FBF4;padding:3px 9px;border-radius:999px}
.mc1{top:20px;left:8%;transform:rotate(-6deg);animation:floaty 6s ease-in-out infinite}
.mc2{top:60px;right:4%;transform:rotate(5deg);z-index:2;animation:floaty 6s ease-in-out infinite .8s}
.mc3{bottom:6px;left:26%;transform:rotate(-2deg);animation:floaty 6s ease-in-out infinite .4s}
.heart-pop{position:absolute;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:26px;top:44%;left:44%;z-index:3;animation:pop 3s ease-in-out infinite}

/* stats */
.stats{background:linear-gradient(120deg,var(--rose),var(--plum));color:#fff}
.stats-in{display:flex;flex-wrap:wrap;justify-content:space-around;gap:24px;text-align:center}
.stats .n{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,4vw,40px)}
.stats .l{opacity:.9;font-size:14px;margin-top:4px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 26px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.step .num{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--rose),var(--plum))}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px;margin:0}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.feat .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:#FFE4EC;margin-bottom:16px}
.feat h3{font-size:19px;margin-bottom:8px}
.feat p{color:var(--muted);font-size:14.5px;margin:0}

/* safety band */
.safety{background:var(--cream)}
.safety-in{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.safety-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:14px}
.safety-list li{display:flex;gap:12px;align-items:flex-start;color:#4a3a44;font-size:15.5px}
.safety-list li .ck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#E7FBF4;color:#0BA57D;font-weight:800;display:grid;place-items:center;font-size:13px}
.safety-art{background:linear-gradient(135deg,#FFE4EC,#F3E9FF);border-radius:var(--radius-lg);padding:40px;text-align:center;font-size:120px}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:#F5A623;margin-bottom:10px;letter-spacing:2px}
.tcard p{font-size:15px;color:#3a2a34;margin:0 0 16px;font-style:italic}
.tcard .who{display:flex;align-items:center;gap:11px}
.tcard .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--plum));color:#fff;display:grid;place-items:center;font-weight:800;font-family:'Poppins',sans-serif}
.tcard .who b{display:block;font-size:14px}.tcard .who span{font-size:12.5px;color:var(--muted)}

/* pricing */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:940px;margin:0 auto}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard.feat-plan{border:2px solid var(--rose);box-shadow:var(--shadow);position:relative}
.pcard.feat-plan::before{content:"Most popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--rose);color:#fff;font-size:11px;font-weight:700;padding:4px 13px;border-radius:999px;font-family:'Poppins',sans-serif}
.pcard .pname{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px}
.pcard .price{font-family:'Poppins',sans-serif;font-weight:800;font-size:38px;margin:8px 0 2px}
.pcard .price sub{font-size:14px;color:var(--muted);font-weight:600}
.pcard ul{list-style:none;padding:0;margin:14px 0 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard li{display:flex;gap:9px;font-size:14.5px;color:#4a3a44}
.pcard li::before{content:"♥";color:var(--rose)}

/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:0 18px}
.faq-item summary{cursor:pointer;list-style:none;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;color:var(--ink);padding:16px 0;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:2px;color:var(--rose);font-size:22px}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--muted);margin:0 0 16px;font-size:15px;line-height:1.65}

/* signup form */
.signup{background:linear-gradient(120deg,var(--rose),var(--plum));color:#fff;text-align:center}
.signup h2{font-size:clamp(28px,4vw,40px);color:#fff}
.signup p{opacity:.94;font-size:18px;margin:14px auto 26px;max-width:520px}
.suform{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.suform input,.suform select{flex:1;min-width:150px;height:52px;border:0;border-radius:12px;padding:0 16px;font-size:15px;font-family:'Inter',sans-serif}
.suform .btn{height:52px}
.sunote{font-size:12.5px;opacity:.85;margin-top:14px}

/* footer */
.ft{background:#241021;color:#c9b2c0;padding:60px 0 26px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
.ft .brand{color:#fff;margin-bottom:14px}
.ft-about{font-size:14px;line-height:1.7;color:#a8909e;max-width:280px}
.ft h4{color:#fff;font-family:'Poppins',sans-serif;font-size:15px;margin-bottom:14px}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ft a{font-size:14px;color:#c9b2c0}.ft a:hover{color:var(--rose)}
.ft-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#8a7280}

/* reveal + anim */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-14px) rotate(var(--r,0))}}
.mc1{--r:-6deg}.mc2{--r:5deg}.mc3{--r:-2deg}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

/* responsive */
@media(max-width:960px){
  .hero-grid,.safety-in{grid-template-columns:1fr;gap:38px}
  .hero-visual{height:400px;max-width:420px;margin:0 auto}
  .steps{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav,.hdr-cta .login{display:none}
  .burger{display:flex}
  .nav.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 22px;box-shadow:var(--shadow)}
  .nav.open a{width:100%}
  .section{padding:58px 0}
  .ft-grid{grid-template-columns:1fr}
}

/* ========================= Attractiveness pass v2 ========================= */
.btn-primary{background:linear-gradient(135deg,var(--rose),var(--plum));background-size:180% 180%;background-position:0 50%;box-shadow:0 14px 32px rgba(214,46,92,.34);transition:background-position .4s var(--ease),transform .18s var(--ease),box-shadow .18s}
.btn-primary:hover{background-position:100% 50%;transform:translateY(-3px)}
.eyebrow{background:linear-gradient(135deg,#FFE4EC,#F3E9FF)}

/* hero ambient glow blobs */
.hero{position:relative}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;z-index:0;pointer-events:none}
.hero::before{width:440px;height:440px;background:radial-gradient(circle,#ffb3c9,transparent 70%);top:-130px;right:-70px;animation:drift 13s ease-in-out infinite}
.hero::after{width:400px;height:400px;background:radial-gradient(circle,#d8b4fe,transparent 70%);bottom:-150px;left:-90px;animation:drift 16s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:1}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-26px)}}

/* animated shimmer on the headline accent */
.hero h1 .grad{background:linear-gradient(100deg,var(--rose),var(--plum),var(--rose));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* glow + polish behind hero cards */
.hero-visual::before{content:"";position:absolute;inset:-24px;background:radial-gradient(circle at 52% 44%,rgba(255,61,113,.28),transparent 66%);filter:blur(26px);z-index:0}
.match-card{border:0;box-shadow:0 26px 54px rgba(120,20,60,.22)}
.match-card .photo{position:relative}
.match-card .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.20))}
.match-card .photo .ini{text-shadow:0 6px 18px rgba(0,0,0,.28)}
.heart-pop{box-shadow:0 16px 34px rgba(255,61,113,.4)}

/* floating hearts (added by app.js) */
.fheart{position:absolute;z-index:0;opacity:0;pointer-events:none;animation:rise linear infinite;filter:drop-shadow(0 4px 8px rgba(255,61,113,.3))}
@keyframes rise{0%{transform:translateY(30px) scale(.7) rotate(-8deg);opacity:0}18%{opacity:.7}100%{transform:translateY(-160px) scale(1.15) rotate(8deg);opacity:0}}

/* softer, richer feature + step cards */
.feat .ic{background:linear-gradient(135deg,#FFD9E6,#EAD9FF);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.feat:hover .ic{transform:scale(1.08) rotate(-5deg);transition:transform .35s var(--ease)}
.step .num{box-shadow:0 10px 22px rgba(214,46,92,.32)}
.step:hover .num{transform:scale(1.1) rotate(-4deg);transition:transform .35s var(--ease)}
.pcard.feat-plan{background:linear-gradient(180deg,#fff, #FFF7FA)}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s}

/* signup section subtle shine */
.signup{position:relative;overflow:hidden}
.signup::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);top:-220px;right:-120px}
.signup .wrap{position:relative;z-index:1}