:root{--pink:#ff4f8b;--deep:#2b0f2e;--cream:#fff6ee;--gold:#ffc94d}
*{box-sizing:border-box}body{margin:0;font-family:"Trebuchet MS",system-ui,sans-serif;background:var(--cream);color:var(--deep)}
a{color:inherit}
nav{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:#fff8;backdrop-filter:blur(8px);border-bottom:2px solid #ffd3e2}
nav a{margin-left:18px;text-decoration:none;font-weight:700}.logo{font-weight:900;font-size:1.3rem}
.pill{background:var(--pink);color:#fff;padding:8px 16px;border-radius:99px}
.hero{position:relative;overflow:hidden;text-align:center;padding:90px 20px 80px;background:radial-gradient(circle at 30% 20%,#ffb3cf,transparent 50%),radial-gradient(circle at 80% 70%,#ffd98a,transparent 45%),linear-gradient(135deg,#ff7aa8,#c44dff)}
.hero h1{font-size:clamp(4rem,14vw,10rem);margin:0;color:#fff;letter-spacing:.05em;text-shadow:6px 6px 0 var(--deep);transform:scaleX(1.15)}
.hero h2{font-size:clamp(1.8rem,5vw,3.2rem);margin:6px 0;color:var(--deep);font-style:italic}
.hero h2 span{display:inline-block;animation:sob 1.6s infinite}
@keyframes sob{50%{transform:translateY(6px) rotate(-8deg)}}
.kicker{display:inline-block;background:var(--deep);color:var(--gold);padding:6px 14px;border-radius:99px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.sub{max-width:640px;margin:16px auto;font-size:1.15rem;color:#fff;font-weight:600}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.btn{padding:14px 26px;border-radius:99px;background:#fff;border:3px solid var(--deep);font-weight:900;text-decoration:none;box-shadow:4px 4px 0 var(--deep);transition:.15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--deep)}.hot{background:var(--gold)}
.ca{position:relative;z-index:1;display:inline-block;max-width:100%;margin-top:28px;font-family:monospace;background:#0003;color:#fff;padding:8px 14px;border-radius:8px;border:1px dashed #fff;overflow-wrap:anywhere;cursor:pointer}
.ca::after{content:"Copy";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--gold);color:var(--deep);font-family:"Trebuchet MS",system-ui,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s}
.ca:hover::after,.ca.copied::after{opacity:1}
.ca.copied::after{content:"Copied"}
.ca.big{background:var(--deep);font-size:1.2rem}
.hearts span{position:absolute;bottom:-40px;font-size:24px;animation:float linear infinite;opacity:.8}
@keyframes float{to{transform:translateY(-110vh) rotate(360deg);opacity:0}}
section{padding:70px 24px;max-width:1200px;margin:auto}
.title{font-size:2.6rem;text-align:center;margin:0 0 8px}
.lead{text-align:center;max-width:620px;margin:0 auto 20px}
.filters{text-align:center;margin-bottom:24px}.filters button{font:inherit;font-weight:700;border:2px solid var(--deep);background:#fff;border-radius:99px;padding:8px 16px;margin:4px;cursor:pointer}.filters .on{background:var(--pink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #c44dff33;transition:.25s;position:relative}
.card:hover{transform:translateY(-6px) rotate(-.6deg)}
.ph{position:relative;aspect-ratio:3/4;background:#eee}.ph img{width:100%;height:100%;object-fit:cover;display:none}.ph img.on{display:block}
.dots{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px}.dots i{flex:1;height:4px;border-radius:4px;background:#fff7}.dots i.on{background:#fff}
.badge{position:absolute;right:10px;bottom:10px;background:#fff;border-radius:99px;padding:4px 10px;font-size:.75rem;font-weight:800}
.ph .nav{position:absolute;top:0;bottom:0;width:50%;cursor:pointer}.ph .nav.r{right:0}
.info{padding:14px 16px 6px}.info h4{margin:0;font-size:1.25rem}.info .h{color:#888;font-size:.9rem}
.cap{background:#f1f0ff;border-radius:16px 16px 16px 4px;padding:8px 12px;margin:8px 0;font-size:.95rem;width:fit-content}
.acts{display:flex;justify-content:space-around;padding:8px 0 14px}.acts button{width:52px;height:52px;border-radius:50%;border:2px solid #eee;background:#fff;font-size:1.4rem;cursor:pointer;transition:.15s}.acts button:hover{transform:scale(1.15)}
.buy{text-align:center}
footer{text-align:center;padding:26px;background:#1a0820;color:#ccc;font-size:.85rem}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(120px);background:var(--deep);color:#fff;padding:12px 20px;border-radius:99px;transition:.3s;font-weight:700}#toast.on{transform:translateX(-50%)}
