:root {
  --pink:#eb57a7; --pink-2:#ff8cc8; --cyan:#42c2de; --ink:#2a2233; --ink-2:#3d3446; --muted:#6b6470;
  --blush:#fee4e4; --line:#f0e3ea; --radius:22px;
  --grad:linear-gradient(135deg,var(--pink),var(--cyan));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; font:16px/1.6 "Poppins",-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; overflow-x:hidden; }
a { color:inherit; }
img, svg { display:block; }
.wrap { max-width:1140px; margin:0 auto; padding:0 22px; }

.top { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:28px; height:70px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:22px; letter-spacing:-.3px; }
.logo img { border-radius:10px; }
.logo b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu { display:flex; gap:24px; margin-left:auto; font-size:15px; font-weight:500; }
.menu a { text-decoration:none; color:var(--ink-2); }
.menu a:hover { color:var(--pink); }
.cta-sm { background:var(--grad); color:#fff !important; padding:10px 18px; border-radius:30px; text-decoration:none; font-weight:600; font-size:14px; }
.burger { display:none; margin-left:auto; background:none; border:0; font-size:26px; cursor:pointer; }

.hero { position:relative; background:radial-gradient(900px 480px at 90% -10%, rgba(66,194,222,.28), transparent 60%), radial-gradient(900px 480px at 0% 0%, rgba(235,87,167,.22), transparent 60%), linear-gradient(180deg,var(--blush),#fff 85%); padding:70px 0 90px; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:30px; padding:6px 14px; font-size:13px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.pill i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); }
.hero h1 { font-size:58px; line-height:1.05; margin:18px 0 10px; letter-spacing:-1.5px; }
.hero h1 .hl { background:linear-gradient(transparent 62%, rgba(66,194,222,.45) 62%); padding:0 4px; }
.hero h1 .grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:19px; color:var(--ink-2); max-width:520px; margin:0 0 28px; }
.stores { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.gp { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; text-decoration:none; border-radius:14px; padding:10px 20px 10px 16px; transition:transform .15s; }
.gp:hover { transform:translateY(-2px); }
.gp small { display:block; font-size:11px; opacity:.8; line-height:1; }
.gp strong { display:block; font-size:18px; line-height:1.2; }
.gp.soon { background:#fff; color:var(--ink); border:1px solid var(--line); }
.note18 { font-size:13px; color:var(--muted); margin-top:14px; }
.hero .wrap > div:first-child > * { animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero .wrap > div:first-child > :nth-child(2) { animation-delay:.1s; }
.hero .wrap > div:first-child > :nth-child(3) { animation-delay:.2s; }
.hero .wrap > div:first-child > :nth-child(4) { animation-delay:.3s; }
.hero .wrap > div:first-child > :nth-child(5) { animation-delay:.4s; }
@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

.phone-zone { position:relative; display:flex; justify-content:center; align-items:center; min-height:520px; }
.hero-img { position:relative; width:440px; max-width:100%; height:auto; border-radius:50%; box-shadow:0 0 0 14px rgba(235,87,167,.22), 0 30px 70px rgba(0,0,0,.15); animation:bob 6s ease-in-out infinite, fade .9s ease-out both; }
.ring { position:absolute; border-radius:50%; border:2px dashed rgba(235,87,167,.4); animation:spin 40s linear infinite; }
.ring.r1 { width:520px; height:520px; }
.ring.r2 { width:600px; height:600px; border-color:rgba(66,194,222,.55); animation-direction:reverse; animation-duration:60s; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.float { position:absolute; z-index:2; background:#fff; color:var(--ink); border-radius:16px; padding:10px 14px; font-size:13px; font-weight:600; box-shadow:0 12px 30px rgba(0,0,0,.12); display:flex; gap:8px; align-items:center; animation:drift 5s ease-in-out infinite; }
.float.f1 { left:-20px; top:60px; }
.float.f2 { right:-30px; top:170px; animation-delay:-1.6s; }
.float.f3 { left:-10px; bottom:40px; animation-delay:-3.2s; }
@keyframes drift { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-10px) rotate(2deg); } }
.float .dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font-size:14px; }

section { padding:90px 0; }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--pink); margin-bottom:8px; }
h2.title { font-size:40px; line-height:1.15; margin:0 0 14px; letter-spacing:-.8px; }
.sub { color:var(--muted); max-width:620px; margin:0 0 40px; font-size:17px; }
.center { text-align:center; } .center .sub { margin-left:auto; margin-right:auto; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:transform .2s, box-shadow .2s; }
.steps .step.in:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(235,87,167,.12); }
.step .ic { width:64px; height:64px; border-radius:18px; background:var(--grad); display:grid; place-items:center; font-size:30px; margin-bottom:18px; box-shadow:0 10px 24px rgba(235,87,167,.25); }
.step .num { font-size:13px; font-weight:700; color:var(--pink); letter-spacing:1px; }
.step h3 { margin:4px 0 8px; font-size:20px; }
.step p { margin:0; color:var(--muted); }

.facts { background:var(--ink); color:#fff; border-radius:30px; padding:44px 30px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.facts strong { display:block; font-size:38px; letter-spacing:-1px; background:linear-gradient(90deg,var(--pink-2),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.facts span { font-size:14px; opacity:.8; }

.about { background:linear-gradient(180deg,#fff,var(--blush)); }
.about .wrap { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-art { position:relative; }
.about-art img { width:100%; height:auto; border-radius:28px; box-shadow:0 30px 60px rgba(0,0,0,.14); }
.about-art .bubbles { position:relative; margin:-56px -20px 0; }
.bubbles { display:flex; flex-direction:column; gap:10px; }
.bubble { max-width:72%; padding:12px 16px; border-radius:20px; font-size:14px; box-shadow:0 10px 26px rgba(0,0,0,.12); opacity:0; transform:translateY(16px) scale(.95); }
.about-art.in .bubble { animation:msg .5s ease-out forwards; }
.about-art.in .bubble:nth-child(2) { animation-delay:.9s; }
.about-art.in .bubble:nth-child(3) { animation-delay:1.8s; }
.about-art.in .bubble:nth-child(4) { animation-delay:2.7s; }
@keyframes msg { to { opacity:1; transform:none; } }
.bubble.l { background:#fff; border-bottom-left-radius:6px; }
.bubble.r { background:var(--grad); color:#fff; align-self:flex-end; border-bottom-right-radius:6px; font-weight:500; }
.about ul { padding:0; margin:22px 0 0; list-style:none; }
.about li { padding-left:34px; position:relative; margin-bottom:12px; }
.about li::before { content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat; }

.vibes { background:var(--blush); }
.vibe-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.vibe { background:#fff; border-radius:22px; padding:26px 10px; font-weight:600; box-shadow:0 8px 22px rgba(0,0,0,.05); transition:transform .25s, background .25s, color .25s; cursor:default; }
.vibe span { display:block; font-size:42px; margin-bottom:8px; transition:transform .3s; }
.vibe-grid .vibe.in:hover { transition-delay:0s; background:var(--grad); color:#fff; transform:translateY(-6px) rotate(-2deg); }
.vibe:hover span { transform:scale(1.25) rotate(8deg); }

.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat { border-radius:var(--radius); padding:30px 26px; background:#fdeef6; }
.feat:nth-child(2) { background:#e6f7fb; } .feat:nth-child(3) { background:#f3eefc; }
.feat .ic { width:54px; height:54px; border-radius:16px; background:#fff; display:grid; place-items:center; margin-bottom:16px; box-shadow:0 6px 16px rgba(0,0,0,.06); font-size:26px; }
.feat h3 { margin:0 0 8px; font-size:20px; } .feat p { margin:0; color:var(--ink-2); }
.feat a, .faq a, .sub a { color:var(--pink); }

.faq { max-width:820px; margin:0 auto; }
.faq details { border:1px solid var(--line); border-radius:18px; padding:18px 22px; margin-bottom:12px; background:#fff; }
.faq summary { cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:24px; line-height:1; color:var(--pink); }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:12px 0 0; color:var(--muted); }

.final { background:var(--grad); color:#fff; border-radius:34px; padding:60px 30px; text-align:center; overflow:hidden; }
.final h2 { margin-top:0; }
.final .app-icon { width:110px; height:110px; border-radius:26px; margin:0 auto 22px; box-shadow:0 18px 40px rgba(0,0,0,.2); animation:bob 6s ease-in-out infinite; }
.final .stores { justify-content:center; }

.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.12s; } .reveal.d2 { transition-delay:.24s; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal, .bubble { opacity:1; transform:none; }
}

.marquee { background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; padding:14px 0; font-weight:700; letter-spacing:1px; }
.marquee div { display:inline-block; animation:scroll 30s linear infinite; }
.marquee span { margin:0 22px; }
.marquee span:nth-child(even) { color:var(--pink-2); }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.foot { background:#1b1621; color:#c9bfcf; padding:60px 0 26px; font-size:15px; }
.foot .grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:34px; }
.foot h4 { color:#fff; margin:0 0 14px; font-size:16px; }
.foot a { display:block; text-decoration:none; color:#c9bfcf; margin-bottom:8px; }
.foot a:hover { color:var(--pink-2); }
.foot .logo { color:#fff; margin-bottom:12px; }
.foot .bottom { border-top:1px solid #2e2635; margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px; color:#8e8496; }

@media (max-width:900px) {
  .menu { display:none; position:absolute; top:70px; left:0; right:0; background:#fff; flex-direction:column; padding:18px 22px; gap:14px; border-bottom:1px solid var(--line); }
  .menu.open { display:flex; }
  .burger { display:block; }
  .hero .wrap, .about .wrap { grid-template-columns:1fr; }
  .hero h1 { font-size:42px; }
  .phone-zone { margin-top:30px; min-height:380px; }
  .hero-img { width:300px; }
  .ring.r1 { width:350px; height:350px; } .ring.r2 { width:400px; height:400px; }
  .float { font-size:11px; padding:6px 10px; border-radius:12px; }
  .float .dot { width:22px; height:22px; font-size:11px; }
  .float.f1 { left:0; top:6px; } .float.f2 { right:0; top:auto; bottom:110px; } .float.f3 { bottom:0; }
  .vibe-grid { grid-template-columns:repeat(3,1fr); }
  .about-art .bubbles { margin:-40px -6px 0; }
  .steps, .cards3 { grid-template-columns:1fr; }
  .facts { grid-template-columns:repeat(2,1fr); }
  .foot .grid { grid-template-columns:1fr 1fr; }
  h2.title { font-size:32px; }
}
/* ===== Motion layer ===== */
.progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:50; background:var(--grad); box-shadow:0 0 12px rgba(235,87,167,.6); transition:width .1s linear; }

.logo img { animation:beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%,40%,100% { transform:scale(1); } 10% { transform:scale(1.14); } 20% { transform:scale(.96); } 30% { transform:scale(1.08); } }

.cta-sm { position:relative; }
.cta-sm::before { content:""; position:absolute; inset:0; border-radius:30px; box-shadow:0 0 0 0 rgba(235,87,167,.55); animation:ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(235,87,167,.55); } 100% { box-shadow:0 0 0 14px rgba(235,87,167,0); } }

.gp { position:relative; overflow:hidden; }
.gp::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); animation:shine 3.6s ease-in-out infinite; }
.gp.soon::after { background:linear-gradient(110deg,transparent,rgba(235,87,167,.18),transparent); }
@keyframes shine { 0%,60% { left:-60%; } 100% { left:130%; } }

.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; animation:blob 18s ease-in-out infinite; }
.blob.b1 { width:420px; height:420px; background:#ff9fd2; top:-120px; left:-120px; }
.blob.b2 { width:380px; height:380px; background:#8fe3f5; bottom:-140px; right:10%; animation-delay:-9s; }
@keyframes blob { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(80px,40px) scale(1.15); } 66% { transform:translate(-40px,90px) scale(.9); } }

.hearts { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hearts span { position:absolute; bottom:-40px; color:var(--pink); opacity:0; animation:rise-heart linear forwards; }
@keyframes rise-heart { 0% { transform:translateY(0) translateX(0) rotate(0); opacity:0; } 10% { opacity:.85; } 100% { transform:translateY(-110vh) translateX(var(--drift,40px)) rotate(var(--spin,30deg)); opacity:0; } }
.hero .wrap { position:relative; z-index:1; }

.rotator { display:inline-block; position:relative; vertical-align:bottom; }
.rotator span { display:inline-block; animation:word-in .55s cubic-bezier(.2,.8,.2,1.2) both; }
.rotator span.out { animation:word-out .35s ease-in both; }
@keyframes word-in { from { opacity:0; transform:translateY(60%) rotateX(-80deg); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
@keyframes word-out { to { opacity:0; transform:translateY(-60%) rotateX(80deg); filter:blur(4px); } }
.hero h1 .grad { background-size:200% 200%; animation:grad-move 5s ease infinite; }
@keyframes grad-move { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }

.hero-img { transition:transform .25s ease-out; }
.phone-zone .tilt-wrap { transition:transform .25s ease-out; will-change:transform; }

.float.f4 { right:-10px; top:-6px; animation-delay:-2.4s; min-width:200px; }
.float .dot.pulse { animation:pulse-dot 1.2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(235,87,167,.5); } 50% { transform:scale(1.12); box-shadow:0 0 0 8px rgba(235,87,167,0); } }
#callText { transition:opacity .3s; }

.reveal.left { transform:translateX(-60px); } .reveal.right { transform:translateX(60px); }
.reveal.zoom { transform:scale(.85); } .reveal.flip { transform:perspective(800px) rotateX(25deg) translateY(30px); }
.reveal.in.left, .reveal.in.right, .reveal.in.zoom, .reveal.in.flip { transform:none; }

h2.title { position:relative; }
.center h2.title::after { content:""; display:block; width:0; height:4px; border-radius:4px; margin:14px auto 0; background:var(--grad); transition:width .9s cubic-bezier(.2,.7,.2,1) .2s; }
.center.in-view h2.title::after { width:90px; }

.step .ic { animation:bob 4s ease-in-out infinite; }
.step:nth-child(2) .ic { animation-delay:-1.3s; } .step:nth-child(3) .ic { animation-delay:-2.6s; }
.step:hover .ic { animation:wiggle .6s ease-in-out; }
@keyframes wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-12deg) scale(1.1); } 75% { transform:rotate(12deg) scale(1.1); } }

.tilt { transform-style:preserve-3d; transition:transform .2s ease-out, box-shadow .2s; }
.tilt:hover { box-shadow:0 24px 50px rgba(235,87,167,.18); }

.facts { position:relative; overflow:hidden; }
.facts::before { content:""; position:absolute; inset:-2px; background:conic-gradient(from 0deg, transparent 0 70%, rgba(235,87,167,.5), rgba(66,194,222,.5), transparent); animation:spin 6s linear infinite; z-index:0; }
.facts::after { content:""; position:absolute; inset:2px; background:var(--ink); border-radius:28px; z-index:0; }
.facts > div { position:relative; z-index:1; }

.feat .ic { transition:transform .4s cubic-bezier(.2,.8,.2,1.4); }
.feat:hover .ic { transform:rotate(-10deg) scale(1.15); }

.vibe { position:relative; overflow:hidden; }
.vibe span { animation:bob 5s ease-in-out infinite; }
.vibe:nth-child(2n) span { animation-delay:-2s; } .vibe:nth-child(3n) span { animation-delay:-3.5s; }

.faq details { transition:border-color .3s, box-shadow .3s, transform .3s; }
.faq details:hover { border-color:var(--pink-2); transform:translateX(4px); }
.faq details[open] { box-shadow:0 14px 30px rgba(235,87,167,.12); border-color:var(--pink); }
.faq details[open] p { animation:rise .45s ease both; }

.final { background:linear-gradient(135deg,var(--pink),#b46ee0,var(--cyan),var(--pink)); background-size:300% 300%; animation:grad-move 10s ease infinite; }
.final::before, .final::after { content:"\2764"; position:absolute; font-size:120px; color:rgba(255,255,255,.12); animation:bob 7s ease-in-out infinite; }
.final::before { left:4%; top:10%; } .final::after { right:5%; bottom:6%; font-size:90px; animation-delay:-3s; }

.burst { position:fixed; pointer-events:none; z-index:60; color:var(--pink); font-size:18px; animation:burst .9s ease-out forwards; }
@keyframes burst { from { opacity:1; transform:translate(-50%,-50%) scale(.6); } to { opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.3) rotate(var(--r)); } }

@media (max-width:900px) {
  .float.f4 { right:0; top:auto; bottom:60px; min-width:0; }
  .blob { width:260px !important; height:260px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .hearts, .blob, .burst { display:none; }
  .center h2.title::after { width:90px; }
}
.final { position:relative; }
.final > * { position:relative; z-index:1; }

/* ===== App showcase phones ===== */
.app-show { background:linear-gradient(180deg,#fff,#fdf0f7 50%,#fff); overflow:hidden; }
.phones { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:start; perspective:1200px; }
.phone-card h3 { margin:22px 0 6px; font-size:19px; }
.phone-card p { margin:0; color:var(--muted); font-size:14.5px; }
.device { position:relative; width:100%; max-width:240px; aspect-ratio:9/19; margin:0 auto; background:#15121a; border-radius:36px; padding:9px; box-shadow:0 30px 60px rgba(42,34,51,.25), inset 0 0 0 2px #2c2633; animation:bob 6s ease-in-out infinite; transition:transform .4s; }
.phone-card:nth-child(2) .device { animation-delay:-1.5s; margin-top:40px; }
.phone-card:nth-child(3) .device { animation-delay:-3s; }
.phone-card:nth-child(4) .device { animation-delay:-4.5s; margin-top:40px; }
.phone-card:hover .device { transform:rotateY(-12deg) rotateX(4deg) scale(1.04); }
.notch { position:absolute; top:14px; left:50%; width:70px; height:18px; margin-left:-35px; background:#15121a; border-radius:12px; z-index:5; }
.scr { position:relative; width:100%; height:100%; border-radius:28px; overflow:hidden; background:#fff6f9; font-size:12px; text-align:left; }
.app-bar { display:flex; justify-content:space-between; align-items:center; padding:36px 14px 8px; font-size:14px; }
.app-bar b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; font-size:16px; }

/* swipe */
.deck { position:absolute; left:12px; right:12px; top:68px; bottom:70px; }
.pcard { position:absolute; inset:0; border-radius:18px; background-size:cover; background-position:center; box-shadow:0 10px 24px rgba(0,0,0,.18); transition:transform .6s cubic-bezier(.3,.7,.3,1), opacity .6s; transform-origin:50% 120%; overflow:hidden; }
.pcard::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75)); }
.pcard:nth-last-child(2) { transform:scale(.95) translateY(10px); }
.pcard:nth-last-child(n+3) { transform:scale(.9) translateY(20px); opacity:.7; }
.pinfo { position:absolute; left:12px; bottom:12px; color:#fff; z-index:2; line-height:1.3; }
.pinfo b { font-size:15px; display:block; } .pinfo small { opacity:.85; }
.pinfo i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#2ecc71; margin-left:5px; box-shadow:0 0 0 3px rgba(46,204,113,.3); }
.stamp { position:absolute; top:22px; z-index:3; font-weight:800; font-size:18px; letter-spacing:2px; padding:2px 10px; border:3px solid; border-radius:8px; opacity:0; transition:opacity .2s; }
.stamp.like { left:14px; color:#12b886; transform:rotate(-14deg); }
.stamp.nope { right:14px; color:#f2495c; transform:rotate(14deg); }
.pcard.go-like { transform:translateX(160%) rotate(28deg) !important; opacity:0; }
.pcard.go-nope { transform:translateX(-160%) rotate(-28deg) !important; opacity:0; }
.pcard.go-like .stamp.like, .pcard.go-nope .stamp.nope { opacity:1; }
.acts { position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:14px; }
.acts i { width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; font-style:normal; font-size:17px; box-shadow:0 6px 14px rgba(0,0,0,.12); transition:transform .2s, background .2s, color .2s; }
.acts .a-nope { color:#f2495c; } .acts .a-star { color:var(--cyan); width:34px; height:34px; margin-top:4px; font-size:14px; } .acts .a-like { color:#12b886; }
.acts i.hit { transform:scale(1.25); color:#fff; }
.acts .a-nope.hit { background:#f2495c; } .acts .a-like.hit { background:#12b886; }

/* random call */
.scr-call { background:linear-gradient(160deg,#2a2233,#4b2a4a); color:#fff; }
.call-find, .call-live { position:absolute; inset:0; transition:opacity .5s; }
.call-find { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.call-find b { font-size:15px; margin-top:26px; } .call-find small { opacity:.7; }
.radar { position:relative; width:86px; height:86px; }
.radar img { position:relative; z-index:2; width:86px; height:86px; border-radius:50%; object-fit:cover; border:3px solid #fff; }
.radar span { position:absolute; inset:0; border-radius:50%; border:2px solid var(--pink-2); animation:radar 2.4s ease-out infinite; }
.radar span:nth-child(2) { animation-delay:.8s; border-color:var(--cyan); } .radar span:nth-child(3) { animation-delay:1.6s; }
@keyframes radar { from { transform:scale(1); opacity:.9; } to { transform:scale(2.6); opacity:0; } }
.dots-load::after { content:""; animation:dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
.call-live { opacity:0; }
.scr-call.live .call-live { opacity:1; } .scr-call.live .call-find { opacity:0; }
.call-live .remote { width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 6s linear; }
.scr-call.live .remote { transform:scale(1); }
.call-live .self { position:absolute; right:10px; top:40px; width:62px; height:86px; object-fit:cover; border-radius:12px; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35); animation:bob 4s ease-in-out infinite; }
.call-top { position:absolute; left:12px; top:40px; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.4); padding:4px 10px; border-radius:20px; font-weight:600; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#ff3b5c; animation:pulse-dot 1s infinite; }
.call-name { position:absolute; left:12px; bottom:76px; font-weight:700; font-size:15px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.call-ctrls { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:14px; }
.call-ctrls i { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.22); backdrop-filter:blur(6px); display:grid; place-items:center; font-style:normal; font-size:16px; }
.call-ctrls i.end { background:#ff3b5c; transform:rotate(135deg); }

/* chat */
.chat-head { display:flex; align-items:center; gap:8px; padding:36px 12px 10px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.chat-head img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.chat-head b { font-size:13px; display:block; line-height:1.1; } .chat-head small { color:#12b886; font-size:10.5px; }
.msgs { position:absolute; left:0; right:0; top:84px; bottom:54px; padding:10px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; overflow:hidden; }
.msg { max-width:78%; padding:7px 11px; border-radius:16px; font-size:12px; line-height:1.35; animation:pop .35s cubic-bezier(.2,.8,.2,1.3) both; }
.msg.in { background:#fff; align-self:flex-start; border-bottom-left-radius:5px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.msg.out { background:var(--grad); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.msg.typing { display:flex; gap:3px; padding:10px 12px; }
.msg.typing span { width:6px; height:6px; border-radius:50%; background:#c7bccc; animation:typing 1s infinite; }
.msg.typing span:nth-child(2) { animation-delay:.15s; } .msg.typing span:nth-child(3) { animation-delay:.3s; }
@keyframes typing { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.85); } to { opacity:1; transform:none; } }
.chat-input { position:absolute; left:10px; right:10px; bottom:12px; height:34px; border-radius:20px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 12px; color:#a99fae; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.chat-input i { width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-style:normal; font-size:11px; }

/* match */
.scr-match { background:linear-gradient(160deg,var(--pink),#b46ee0 55%,var(--cyan)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.scr-match h4 { font-family:"Poppins"; font-size:26px; margin:0; font-weight:800; font-style:italic; letter-spacing:-.5px; text-shadow:0 4px 16px rgba(0,0,0,.2); }
.scr-match p { margin:4px 0 18px; font-size:11.5px; opacity:.9; }
.pair { position:relative; width:150px; height:100px; margin-bottom:18px; }
.pair img { position:absolute; top:0; width:84px; height:100px; border-radius:16px; object-fit:cover; border:3px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.pair .m1 { left:0; transform:rotate(-10deg); } .pair .m2 { right:0; transform:rotate(10deg); }
.pair .mh { position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:#fff; color:var(--pink); display:grid; place-items:center; font-size:20px; z-index:2; box-shadow:0 6px 16px rgba(0,0,0,.2); }
.scr-match.play .m1 { animation:slide-l .7s cubic-bezier(.2,.8,.2,1.2) both; }
.scr-match.play .m2 { animation:slide-r .7s cubic-bezier(.2,.8,.2,1.2) both; }
.scr-match.play .mh { animation:heart-pop .6s .55s cubic-bezier(.2,.8,.2,1.6) both, beat 1.6s 1.2s infinite; }
.scr-match.play h4 { animation:pop .5s .7s both; }
.scr-match.play p, .scr-match.play .mbtn { animation:pop .5s .9s both; }
@keyframes slide-l { from { transform:translateX(-120px) rotate(-30deg); opacity:0; } to { transform:rotate(-10deg); opacity:1; } }
@keyframes slide-r { from { transform:translateX(120px) rotate(30deg); opacity:0; } to { transform:rotate(10deg); opacity:1; } }
@keyframes heart-pop { from { transform:scale(0); } to { transform:scale(1); } }
.mbtn { display:block; width:78%; padding:9px; border-radius:22px; font-weight:700; font-size:12px; margin-top:8px; }
.mbtn.solid { background:#fff; color:var(--pink); } .mbtn.ghost { border:2px solid rgba(255,255,255,.8); }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti span { position:absolute; top:-20px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(460px) rotate(var(--r,180deg)); opacity:0; } }

/* ===== Feature rows ===== */
.features { padding-top:40px; overflow:hidden; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:110px; }
.frow:last-child { margin-bottom:0; }
.frow.rev .fimg { order:2; }
.fimg { position:relative; }
.fimg .ph { border-radius:30px; overflow:hidden; box-shadow:0 30px 60px rgba(42,34,51,.18); }
.fimg img { width:100%; height:auto; transform:scale(1.12); will-change:transform; }
.fimg::before { content:""; position:absolute; inset:-18px 18px 18px -18px; border-radius:34px; background:var(--grad); opacity:.18; z-index:-1; animation:wobble 8s ease-in-out infinite; }
.frow.rev .fimg::before { inset:-18px -18px 18px 18px; }
@keyframes wobble { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(2deg) scale(1.02); } }
.sticker { position:absolute; background:#fff; border-radius:16px; padding:9px 14px; font-weight:700; font-size:13px; box-shadow:0 14px 30px rgba(0,0,0,.14); display:flex; align-items:center; gap:6px; animation:drift 5s ease-in-out infinite; z-index:2; }
.sticker.s1 { left:-22px; top:30px; } .sticker.s2 { right:-18px; bottom:40px; animation-delay:-2s; }
.sticker.s3 { right:30px; top:-18px; animation-delay:-3.5s; }
.sticker em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ticks { list-style:none; padding:0; margin:0; }
.ticks li { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.ticks li b { flex:0 0 36px; height:36px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:17px; box-shadow:0 8px 18px rgba(235,87,167,.25); }
.ticks li span { color:var(--ink-2); padding-top:6px; }
.reveal.in .ticks li { animation:rise .6s both; }
.reveal.in .ticks li:nth-child(2) { animation-delay:.15s; } .reveal.in .ticks li:nth-child(3) { animation-delay:.3s; }

/* ===== Moments strip ===== */
.moments { overflow:hidden; background:linear-gradient(180deg,#fff,var(--blush)); }
.strip { overflow:hidden; margin-top:22px; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.track { display:flex; gap:18px; width:max-content; animation:scroll 45s linear infinite; }
.strip.rev .track { animation-direction:reverse; animation-duration:55s; }
.strip:hover .track { animation-play-state:paused; }
.shot2 { position:relative; flex:0 0 auto; width:300px; height:220px; border-radius:24px; overflow:hidden; box-shadow:0 14px 30px rgba(42,34,51,.15); transition:transform .4s; }
.shot2.tall { width:180px; }
.shot2 img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.shot2:hover { transform:translateY(-8px) rotate(-1.5deg); }
.shot2:hover img { transform:scale(1.1); }
.shot2 span { position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.92); padding:5px 12px; border-radius:14px; font-size:12.5px; font-weight:600; }

.safety-img { width:300px; max-width:70vw; height:auto; margin:0 auto 40px; border-radius:50%; animation:bob 6s ease-in-out infinite; filter:drop-shadow(0 24px 40px rgba(235,87,167,.25)); }

.spot { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.7),transparent 65%); pointer-events:none; transform:translate(-50%,-50%); opacity:0; transition:opacity .4s; z-index:0; }
.hero:hover .spot { opacity:1; }

@media (max-width:900px) {
  .phones { grid-template-columns:repeat(2,1fr); gap:30px 18px; }
  .phone-card:nth-child(n) .device { margin-top:0; }
  .frow { grid-template-columns:1fr; gap:40px; margin-bottom:70px; }
  .frow.rev .fimg { order:0; }
  .sticker.s1 { left:6px; } .sticker.s2 { right:6px; }
  .shot2 { width:220px; height:160px; } .shot2.tall { width:130px; }
}
@media (prefers-reduced-motion:reduce) { .confetti, .spot { display:none; } }
footer .addr{display:block;font-size:13px;line-height:1.5;opacity:.75;margin-top:6px;max-width:240px}