:root{
  --bg:#fff5fb;
  --bg2:#ffeaf5;
  --panel:#ffffff;
  --panel-soft:rgba(255,255,255,.78);
  --line:rgba(255,76,139,.14);
  --text:#27131d;
  --muted:#815b6d;
  --pink:#ff4c8b;
  --pink2:#ff83b0;
  --pink3:#ffd2e4;
  --green:#24c77f;
  --gold:#f6b73c;
  --shadow:0 16px 50px rgba(255,76,139,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  padding:0 18px 230px;
  color:var(--text);
  background:
    radial-gradient(680px 320px at 0% 0%, rgba(255,120,174,.23), transparent 60%),
    radial-gradient(800px 440px at 100% 0%, rgba(255,182,211,.26), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, #fff 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
}
body>*{width:min(100%,1120px);margin-left:auto;margin-right:auto}
a{color:inherit;text-decoration:none}
.bg-hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;opacity:.14}
.bg-hearts span{position:absolute;font-size:42px;color:#ff87b6;filter:blur(.1px)}
.bg-hearts span:nth-child(1){left:3%;top:5%}
.bg-hearts span:nth-child(2){right:7%;top:11%}
.bg-hearts span:nth-child(3){left:10%;top:33%}
.bg-hearts span:nth-child(4){right:10%;top:45%}
.bg-hearts span:nth-child(5){left:14%;top:70%}
.bg-hearts span:nth-child(6){right:16%;top:80%}
.bg-hearts span:nth-child(7){left:48%;top:91%}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0 10px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:850;letter-spacing:-.04em}
.logo-heart{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  box-shadow:0 14px 35px rgba(255,76,139,.28)
}
.logo-heart img{width:100%;height:100%;object-fit:cover}
.online-pill{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--shadow);
  color:#5a3144;font-size:13px;backdrop-filter:blur(14px)
}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(36,199,127,.12)}

.hero-copy{padding:16px 0 8px;max-width:760px;text-align:center}
.hero-copy h1{margin:0;font-size:clamp(36px,7vw,64px);line-height:1.02;letter-spacing:-.055em}
.hero-copy .accent{background:linear-gradient(135deg,#ff4c8b,#ff8fba);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{margin:16px auto 0;max-width:620px;color:var(--muted);font-size:15px;line-height:1.7}

.hero{margin-top:12px}
.swiper{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;
  scrollbar-width:none;padding:6px 4px 10px
}
.swiper::-webkit-scrollbar{display:none}
.slide{
  position:relative;flex:0 0 min(86vw,360px);aspect-ratio:.82;overflow:hidden;scroll-snap-align:center;
  border-radius:30px;background:linear-gradient(180deg,#ffd5e5,#ffb7d2 35%,#f08aae 100%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(255,93,148,.18)
}
.slide-img,.card-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#f8cade;
}
.slide:before,.card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%);
  z-index:1;
}
.slide:after,.card:after{
  content:"";position:absolute;inset:38% 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(67,18,38,.16) 20%, rgba(39,13,26,.84) 100%);
}
.slide-verified,.slide-online{
  position:absolute;top:14px;z-index:3;padding:7px 11px;border-radius:999px;
  font-size:11px;font-weight:800;background:rgba(255,255,255,.82);border:1px solid rgba(255,76,139,.18);
  color:#60283c;backdrop-filter:blur(14px)
}
.slide-verified{left:14px}
.slide-online{right:14px;display:flex;align-items:center;gap:7px}
.slide-info{position:absolute;z-index:3;left:18px;right:18px;bottom:18px;color:#fff}
.slide-info .name{font-size:26px;font-weight:850;letter-spacing:-.03em}
.slide-info .loc{margin-top:6px;color:rgba(255,255,255,.92);font-size:12px}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tag{padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.15);font-size:10px;border:1px solid rgba(255,255,255,.16);color:#fff}
.tag.hot{background:rgba(255,95,152,.35);border-color:rgba(255,170,205,.55)}
.dots{display:flex;justify-content:center;gap:7px;margin:10px 0 0}
.dots i{width:7px;height:7px;border-radius:50%;background:#eeb1c9;transition:.25s}
.dots i.on{width:22px;border-radius:999px;background:linear-gradient(135deg,var(--pink),var(--pink2))}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.item{
  padding:18px 12px;text-align:center;border-radius:20px;background:var(--panel-soft);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)
}
.item .num{font-size:20px;font-weight:850;color:#d92d73}
.item .lbl{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.35}

.sect-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 2px 16px}
.sect-title h2{margin:0;font-size:28px;letter-spacing:-.04em}
.more{font-size:14px;color:#f2508c;font-weight:800;white-space:nowrap}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{
  position:relative;aspect-ratio:.78;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#ffdbe9,#ffb8d2 38%,#f089ae 100%);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 24px 60px rgba(255,93,148,.16)
}
.card-badge{
  position:absolute;z-index:4;top:12px;left:12px;padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);font-size:11px;font-weight:800;color:#6b3148
}
.card-badge.gold{color:#9f6900}
.card-badge.new{color:#c8437f}
.card-heart{
  position:absolute;z-index:4;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.86);color:#ff5a98;box-shadow:0 8px 18px rgba(255,76,139,.12)
}
.card-online{position:absolute;z-index:4;right:14px;bottom:16px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid #fff}
.card-info{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;color:#fff}
.card-info .nm{font-size:18px;font-weight:850}
.tg{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tg span{font-size:10px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);color:#fff}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px}
.feat{
  padding:18px 14px;min-height:116px;border-radius:22px;background:rgba(255,255,255,.78);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px)
}
.feat-icon{font-size:24px}
.ft{margin-top:10px;font-size:14px;font-weight:800;color:#4d2132}
.fs{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}

.urgency{
  display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,104,160,.16),rgba(255,255,255,.78));
  border:1px solid rgba(255,90,151,.18);box-shadow:var(--shadow)
}
.urgency .av{width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center;flex:none;border:3px solid rgba(255,255,255,.9)}
.urgency .txt{font-size:12px;color:#70465a;line-height:1.55}
.urgency .txt b{color:#381523;font-size:14px}

.foot-hint{text-align:center;color:#8c6576;font-size:12px;line-height:1.6;margin:26px auto 0}
.stars{color:#f1af27;letter-spacing:2px;font-size:15px}

.cta-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  width:100%;
  padding:14px max(18px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,245,251,0),rgba(255,245,251,.92) 20%,rgba(255,255,255,.99) 100%);
}

/* Notice panel: same width and rounded style as the download button */
.cta-notice{
  width:min(calc(100% - 36px),520px);
  margin:0 auto 10px;
  padding:12px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff0f7,#ffe3ef);
  border:1px solid rgba(255,76,139,.24);
  box-shadow:0 12px 30px rgba(255,76,139,.12);
  text-align:center;
}

.notice-title{
  color:#df3678;
  font-size:12px;
  font-weight:850;
  line-height:1.25;
  margin-bottom:5px;
}

.notice-text{
  color:#684052;
  font-size:10px;
  font-weight:500;
  line-height:1.42;
}

.notice-text strong{
  color:#d92d73;
  font-weight:800;
}

.notice-note{
  margin-top:4px;
  color:#896376;
  font-size:9px;
  font-weight:400;
  line-height:1.38;
}

.notice-note strong{
  color:#704357;
  font-weight:750;
}

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(calc(100% - 36px),520px);
  margin:0 auto;
  padding:17px 18px;
  border-radius:20px;
  background:linear-gradient(135deg,#ff4c8b,#ff83b0);
  color:#fff;
  text-align:center;
  font-size:17px;
  font-weight:850;
  box-shadow:0 20px 45px rgba(255,76,139,.28);
}

.cta-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:17px;
  font-weight:850;
  line-height:1.25;
}

.heart{font-size:18px}

@media (min-width: 900px){
  .hero-copy{padding-top:24px}
  .swiper{justify-content:center}
  .slide{flex-basis:340px}
}

@media (max-width: 640px){
  body{padding-left:14px;padding-right:14px}
  body>*{width:100%}
  .header{padding-top:18px}
  .logo{font-size:20px}
  .online-pill{font-size:12px;padding:8px 11px}
  .hero-copy{text-align:left}
  .hero-copy p{margin-left:0;margin-right:0}
  .hero-copy h1{font-size:40px}
  .slide{flex-basis:88%}
  .stats{gap:9px}
  .item{padding:14px 8px}
  .item .num{font-size:16px}
  .item .lbl{font-size:10px}
  .sect-title h2{font-size:22px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .feat{padding:14px 10px;min-height:108px}
  .feat-icon{font-size:20px}
  .ft{font-size:12px}
  .fs{font-size:10px}
}

@media (max-width: 390px){
  .hero-copy h1{font-size:36px}
  .slide{flex-basis:91%}
  .features{grid-template-columns:repeat(1,minmax(0,1fr))}
}