:root {
  --gold:#f5c400; --gold-2:#ffde59; --ink:#111; --ink-2:#2b2b2b; --muted:#666; --red:#e5243b;
  --cream:#fff8e1; --line:#ececec; --radius:22px;
}
* { 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; }

/* Header */
.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 b { color:var(--red); }
.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(--red); }
.cta-sm { background:var(--ink); 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 */
.hero { position:relative; background:radial-gradient(1200px 520px at 85% -10%, var(--gold-2), transparent 60%), linear-gradient(180deg,var(--cream),#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%, var(--gold) 62%); padding:0 4px; }
.hero h1 .red { color:var(--red); }
.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; }
.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; } }

/* Hero art */
.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%; background:var(--cream); box-shadow:0 0 0 14px rgba(245,196,0,.35), 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(229,36,59,.35); animation:spin 40s linear infinite; }
.ring.r1 { width:520px; height:520px; }
.ring.r2 { width:600px; height:600px; border-color:rgba(245,196,0,.6); 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; } }
.phone { position:relative; width:280px; height:570px; background:#111; border-radius:44px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.25); transform:rotate(-4deg); }
.phone.mini { position:absolute; right:-30px; bottom:-40px; transform:scale(.46) rotate(8deg); transform-origin:bottom right; animation:none; }
.screen { width:100%; height:100%; border-radius:34px; background:linear-gradient(180deg,#1d1d1d,#000); color:#fff; display:flex; flex-direction:column; align-items:center; padding:46px 20px 24px; position:relative; overflow:hidden; }
.screen .tag { font-size:12px; color:var(--gold); font-weight:600; letter-spacing:.5px; }
.avatar { width:112px; height:112px; border-radius:50%; margin:22px 0 12px; background:linear-gradient(135deg,#ffb199,#ff0844); display:grid; place-items:center; font-size:44px; font-weight:800; color:#fff; box-shadow:0 0 0 8px rgba(245,196,0,.18), 0 0 0 18px rgba(245,196,0,.08); }
.screen h4 { margin:0; font-size:20px; }
.screen .timer { font-size:14px; opacity:.75; margin-top:4px; }
.wave { display:flex; gap:4px; align-items:center; height:40px; margin:26px 0; }
.wave span { width:5px; border-radius:3px; background:var(--gold); animation:wave 1.1s ease-in-out infinite; }
.wave span:nth-child(odd) { animation-delay:.2s; } .wave span:nth-child(3n) { animation-delay:.45s; }
@keyframes wave { 0%,100% { height:8px; } 50% { height:36px; } }
.controls { margin-top:auto; display:flex; gap:22px; }
.controls div { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#2a2a2a; }
.controls .end { background:var(--red); }
.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:150px; animation-delay:-1.6s; }
.float.f3 { left:-10px; bottom:30px; 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(--gold); }

/* Sections */
section { padding:90px 0; }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); 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; position:relative; transition:transform .2s, box-shadow .2s; }
.steps .step.in:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.07); }
.step .shot { width:100%; height:auto; border-radius:16px; margin-bottom:18px; background:var(--cream); transition:transform .4s; }
.step:hover .shot { transform:scale(1.04) rotate(-1deg); }
.step .num { width:48px; height:48px; border-radius:14px; background:var(--gold); display:grid; place-items:center; font-weight:800; font-size:20px; margin-bottom:18px; }
.step h3 { margin:0 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; color:var(--gold); letter-spacing:-1px; }
.facts span { font-size:14px; opacity:.8; }

.about { background:linear-gradient(180deg,#fff,var(--cream)); }
.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,.18); }
.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(--gold); 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(--gold) 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='%23111'/%3E%3C/svg%3E") center/14px no-repeat; }

.moods { background:var(--cream); }
.mood-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.mood { 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; cursor:default; }
.mood span { display:block; font-size:42px; margin-bottom:8px; transition:transform .3s; }
.mood-grid .mood.in:hover { transition-delay:0s; background:var(--gold); transform:translateY(-6px) rotate(-2deg); }
.mood:hover span { transform:scale(1.25) rotate(8deg); }
.safety-img { width:340px; height:340px; max-width:80vw; max-height:80vw; object-fit:cover; border-radius:50%; box-shadow:0 0 0 12px rgba(245,196,0,.25); margin:0 auto 44px; animation:bob 7s ease-in-out infinite; }
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat { border-radius:var(--radius); padding:30px 26px; background:var(--cream); }
.feat:nth-child(2) { background:#fde8ea; } .feat:nth-child(3) { background:#eef6ee; }
.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); }
.feat h3 { margin:0 0 8px; font-size:20px; } .feat p { margin:0; color:var(--ink-2); }

.join { background:var(--ink); color:#fff; border-radius:34px; padding:56px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; position:relative; overflow:hidden; }
.join::after { content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%; background:var(--gold); opacity:.15; }
.join h2 { color:#fff; }
.join p { color:#ccc; }
.join ol { margin:20px 0 0; padding-left:20px; color:#ddd; } .join li { margin-bottom:8px; }
.join-side { position:relative; z-index:1; }
.join-img { width:78%; height:auto; margin:0 auto -30px; border-radius:24px; animation:bob 6s ease-in-out infinite; }
.earn { background:#1e1e1e; border:1px solid #333; border-radius:24px; padding:26px; position:relative; z-index:1; }
.earn .row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #333; font-size:15px; }
.earn .row:last-child { border:0; } .earn .row b { color:var(--gold); }
.btn-gold { display:inline-block; margin-top:24px; background:var(--gold); color:var(--ink); padding:13px 26px; border-radius:30px; text-decoration:none; font-weight:700; }

.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::after { content:"+"; font-size:24px; line-height:1; color:var(--red); }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:12px 0 0; color:var(--muted); }

.final { background:radial-gradient(800px 300px at 50% 0, var(--gold-2), transparent 70%), var(--gold); border-radius:34px; padding:60px 30px; text-align:center; }
.final h2 { margin-top:0; }
.final-img { width:min(720px,100%); height:auto; margin:-20px auto 26px; border-radius:24px; }

.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; }
}
.final .stores { justify-content:center; }

.marquee { background:var(--ink); color:var(--gold); 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; }
@keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Footer */
.foot { background:#0b0b0b; color:#bbb; 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:#bbb; margin-bottom:8px; }
.foot a:hover { color:var(--gold); }
.foot .logo { color:#fff; margin-bottom:12px; }
.foot .bottom { border-top:1px solid #222; margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px; color:#888; }

@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, .join { 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; }
  .phone.mini { right:0; bottom:-30px; transform:scale(.34) rotate(8deg); }
  .float { font-size:11px; padding:6px 10px; border-radius:12px; }
  .float .dot { width:22px; height:22px; }
  .float.f1 { left:0; top:6px; } .float.f2 { right:0; top:auto; bottom:110px; } .float.f3 { bottom:0; }
  .mood-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; }
  .join { padding:36px 24px; }
  h2.title { font-size:32px; }
}