:root{
  --pink:#ff4f96;--pink-2:#ff7c78;--purple:#8067ff;--ink:#282d4d;--muted:#878da8;
  --bg:#fff4fa;--card:#fff;--line:#eee5ed;--soft:#fff8fc;
  --shadow:0 16px 44px rgba(75,39,72,.11);--shadow-sm:0 8px 24px rgba(75,39,72,.07);
  --radius-xl:26px;--radius-lg:20px;--radius-md:15px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff7fb}
body{margin:0;color:var(--ink);background:
  radial-gradient(circle at 8% 0%,rgba(255,119,174,.14),transparent 28%),
  radial-gradient(circle at 95% 17%,rgba(132,105,255,.08),transparent 24%),
  linear-gradient(180deg,#ffeff8 0,#fff8fc 42%,#fff 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(255,79,150,.16);outline-offset:2px}
img{display:block;max-width:100%}.app{width:min(100%,560px);margin:0 auto;min-height:100vh;overflow:hidden}

/* Header */
.topbar{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;background:rgba(255,255,255,.91);backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid rgba(238,227,237,.88)}
.brand{min-width:0;font-weight:950;font-style:italic;color:var(--pink);font-size:22px;line-height:1;letter-spacing:-.65px;white-space:nowrap;text-shadow:0 2px 16px rgba(255,79,150,.08)}
.brand small{display:block;margin-top:4px;font-size:6.2px;line-height:1;letter-spacing:1.45px;color:#b6b1bc;font-weight:750;font-style:normal;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:6px;min-width:0}.lang{width:100px;min-width:0;height:36px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 24px 0 10px;color:#555a74;font-size:10px;font-weight:700;outline:none;box-shadow:0 4px 13px rgba(61,34,61,.035)}
.signup-top{height:36px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;color:#fff;font-weight:900;padding:0 12px;border-radius:999px;background:linear-gradient(100deg,#ff9850 0%,#ff4d95 65%,#f744aa 100%);box-shadow:0 9px 22px rgba(255,78,144,.20);font-size:9.5px;transition:transform .18s ease,box-shadow .18s ease}.signup-top:active{transform:scale(.97)}

/* Hero */
.hero{position:relative;margin:12px;border-radius:var(--radius-xl);min-height:626px;background:#fff;overflow:hidden;box-shadow:0 18px 52px rgba(82,42,76,.12);border:1px solid rgba(239,227,236,.92)}
.hero-img{position:absolute;left:0;right:0;top:0;height:392px;background:url("assets/hero.jpg") 62% 16%/cover no-repeat;transform:scale(1.01)}
.hero-img:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 40%,rgba(255,255,255,.03) 72%),
  linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.02) 44%,rgba(255,255,255,.66) 80%,#fff 100%)}
.hero-content{position:relative;z-index:2;padding:20px 15px 0;max-width:332px}
.world{display:inline-flex;align-items:center;min-height:29px;padding:6px 11px;border-radius:999px;color:#fff;background:linear-gradient(90deg,#ff4f94,#ff77b1);font-size:9px;font-weight:900;box-shadow:0 9px 21px rgba(255,78,148,.22);letter-spacing:.15px}
.hero h1{font-size:31px;line-height:1.035;margin:14px 0 9px;max-width:282px;letter-spacing:-1.25px;text-wrap:balance}.hero h1 span{background:linear-gradient(90deg,#ff4f94 0%,#ec3c8e 35%,#252b4b 76%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:10.8px;line-height:1.48;color:#687088;max-width:282px;margin:0;font-weight:520}
.feature-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px;max-width:302px}
.feature-pill{min-width:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid rgba(239,230,237,.96);border-radius:13px;padding:8px 9px;box-shadow:0 8px 20px rgba(67,38,66,.055);font-size:8.8px;font-weight:900;line-height:1.15;overflow:hidden}.feature-pill span{display:inline;overflow-wrap:anywhere}.feature-pill small{display:block;font-size:6.8px;color:#9a9eae;font-weight:650;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-card{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.98);border-radius:20px;padding:15px 16px;box-shadow:0 18px 44px rgba(75,42,73,.13);border:1px solid #f0e6ed}.bonus-card:before{content:"";position:absolute;right:-22px;top:-28px;width:95px;height:95px;border-radius:50%;background:radial-gradient(circle,rgba(255,100,162,.13),transparent 68%)}
.bonus-card .label{font-size:10px;font-weight:900}.bonus-card .amount{font-size:34px;line-height:1;font-weight:1000;color:#ff7049;letter-spacing:-1px;margin:7px 0 6px}.bonus-card .muted{font-size:8.4px;line-height:1.35;color:#aaa5af;max-width:90%}.claim{display:block;width:100%;margin-top:11px;border:0;color:#fff;font-weight:900;padding:12px 15px;border-radius:999px;background:linear-gradient(100deg,#ff9849,#ff4899 70%,#f73faa);box-shadow:0 10px 22px rgba(255,72,151,.22);font-size:10px;transition:transform .18s ease,filter .18s ease}.claim:active{transform:scale(.985);filter:brightness(.98)}

/* Feature shortcuts */
.quick{margin:0 12px 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quick-item{min-height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(255,255,255,.96);border:1px solid #f0e5ed;border-radius:16px;padding:10px 6px;text-align:center;box-shadow:var(--shadow-sm);overflow:hidden}.quick-item i{width:30px;height:30px;display:grid;place-items:center;font-style:normal;font-size:16px;line-height:1;background:linear-gradient(135deg,#fff0f7,#f1eeff);border-radius:10px}.quick-item b{font-size:8.9px;line-height:1.15;display:block;margin-top:6px;max-width:100%;overflow-wrap:anywhere}.quick-item small{font-size:6.9px;line-height:1.2;color:#aaa4b1;margin-top:2px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Sections */
.section{padding:12px}.section h2{font-size:19px;line-height:1.15;margin:4px 0 11px;letter-spacing:-.35px}.banner-grid{display:grid;gap:11px}.banner{height:180px;border-radius:21px;overflow:hidden;position:relative;background:#ddd;box-shadow:var(--shadow);border:1px solid rgba(239,227,236,.9)}.banner img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.banner:active img{transform:scale(1.025)}.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,28,51,.79) 0%,rgba(28,28,51,.39) 49%,rgba(28,28,51,.04) 81%)}.banner .txt{position:absolute;z-index:2;left:16px;top:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;color:#fff;max-width:58%}.banner h3{font-size:19px;line-height:1.05;margin:0 0 6px;letter-spacing:-.3px;text-wrap:balance}.banner p{font-size:8.7px;line-height:1.4;margin:0;color:#f6eef7}.banner button{margin-top:auto;border:0;color:#fff;border-radius:999px;padding:9px 12px;font-size:8.7px;font-weight:900;background:linear-gradient(90deg,#ff9b51,#ff4e9d);box-shadow:0 8px 18px rgba(255,77,154,.22)}
.hot-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.see{font-size:8.5px;color:#a8a3af;white-space:nowrap}.hosts{display:flex;gap:10px;overflow-x:auto;padding:1px 1px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}.hosts::-webkit-scrollbar{display:none}.host{position:relative;flex:0 0 43%;aspect-ratio:.72;border-radius:18px;overflow:hidden;background:#ddd;box-shadow:var(--shadow-sm);border:1px solid rgba(239,227,236,.9);scroll-snap-align:start}.host img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.host:active img{transform:scale(1.025)}.host:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 43%,rgba(17,19,38,.86))}.host .live{position:absolute;z-index:2;top:9px;left:9px;background:#ff4f85;color:#fff;border-radius:7px;padding:4px 6px;font-size:6.8px;font-weight:900;letter-spacing:.35px;box-shadow:0 6px 14px rgba(255,74,132,.22)}.host .name{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;color:#fff;min-width:0}.host .name b{display:block;font-size:11.5px;line-height:1.2}.host .name span{display:block;margin-top:3px;font-size:7.6px;line-height:1.2;color:#f5dbe7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Steps / footer */
.steps{background:rgba(255,255,255,.97);border-radius:19px;margin:0 12px 16px;padding:6px 14px;box-shadow:var(--shadow);border:1px solid rgba(239,227,236,.9)}.step{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #f2e9ef}.step:last-child{border-bottom:0}.step:after{content:"›";color:#d3ccd2;font-size:18px}.step-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff805b,#ff43a1);box-shadow:0 6px 16px rgba(255,78,150,.18);color:#fff;font-size:9px;font-weight:900}.step b{display:block;font-size:10px;line-height:1.2}.step p{margin:3px 0 0;color:#9e99a8;font-size:7.8px;line-height:1.35}
.footer{margin:0 12px 88px;background:#fff;border-radius:21px;padding:18px 15px;box-shadow:var(--shadow);border:1px solid rgba(239,227,236,.9)}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}.footer h4{font-size:10px;margin:0 0 7px;color:#3a3e59}.footer p,.footer a{display:block;font-size:7.8px;line-height:1.45;color:#a8a3af;margin:4px 0}.copyright{text-align:center;border-top:1px solid #f1e9ef;margin-top:14px;padding-top:10px;font-size:7.3px;color:#bbb5c0}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:55;width:min(100%,560px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,255,255,.965);border-top:1px solid #f0e4ed;padding:6px 4px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(18px) saturate(130%);box-shadow:0 -9px 28px rgba(72,40,72,.07)}.bottom-nav a{text-align:center;color:#aaa3af;font-size:7.3px;line-height:1.1;min-width:0;overflow:hidden;padding:2px 0}.bottom-nav i{display:grid;place-items:center;width:28px;height:26px;margin:0 auto 2px;font-style:normal;font-size:16px;line-height:1;border-radius:9px}.bottom-nav span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bottom-nav .active{color:var(--pink);font-weight:850}.bottom-nav .active i{background:#fff0f6}

/* Modals */
.modal{position:fixed;inset:0;z-index:100;background:rgba(31,26,49,.60);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}.modal.open{display:flex}.modal-box{width:min(100%,420px);max-height:min(90vh,690px);overflow:auto;background:#fff;border-radius:24px;padding:20px;box-shadow:0 24px 80px rgba(49,27,56,.28);border:1px solid rgba(255,255,255,.7);animation:pop .22s ease}@keyframes pop{from{transform:translateY(10px) scale(.97);opacity:.35}to{transform:none;opacity:1}}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal h3{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.25px;text-wrap:balance}.close{flex:0 0 32px;border:0;background:#f7f1f5;border-radius:50%;width:32px;height:32px;color:#8e8993;font-size:18px}.field{margin-top:11px}.field label{display:block;font-size:8.8px;color:#8f8998;margin-bottom:5px;font-weight:750}.field input{width:100%;height:43px;border:1px solid #eee4ec;border-radius:13px;padding:0 12px;outline:none;color:#343851;background:#fff}.field input:focus{border-color:#ff80ae;box-shadow:0 0 0 3px rgba(255,79,148,.08)}.submit{width:100%;margin-top:15px;border:0;border-radius:999px;padding:12px;color:#fff;font-weight:900;background:linear-gradient(90deg,#ff9849,#ff459c);box-shadow:0 10px 22px rgba(255,72,151,.19)}.wait-box{text-align:center}.spinner{width:54px;height:54px;border-radius:50%;border:4px solid #ffdce9;border-top-color:#ff4f94;margin:5px auto 15px;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.bar{height:7px;background:#ffe5ef;border-radius:999px;overflow:hidden;margin:15px 0 9px}.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff974b,#ff43a0);border-radius:inherit}.count{font-weight:900;color:#34394f;font-size:12px}.wait-note{font-size:9px;color:#aaa4b1;line-height:1.5}.success-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:3px auto 13px;background:linear-gradient(145deg,#45d79a,#29c782);box-shadow:0 10px 24px rgba(48,205,139,.22);color:#fff;font-size:30px;font-weight:900}.success{text-align:center}.success p{color:#77728a;font-size:10.5px;line-height:1.5}.success .enter{width:100%;border:0;border-radius:999px;padding:12px;color:#fff;font-weight:900;background:linear-gradient(90deg,#ff9849,#ff459c);box-shadow:0 10px 22px rgba(255,72,151,.19)}

/* subtle motion */
@media (prefers-reduced-motion:no-preference){.world{animation:float 3.1s ease-in-out infinite}.claim,.signup-top,.banner,.host,.quick-item{transition:transform .2s ease,box-shadow .2s ease}.quick-item:active{transform:translateY(1px)}@keyframes float{50%{transform:translateY(-2px)}}}

@media(max-width:380px){
  .topbar{padding:9px 9px;gap:6px}.brand{font-size:19px}.brand small{display:none}.lang{width:82px;height:34px;padding-left:8px;font-size:8.8px}.signup-top{height:34px;max-width:88px;padding:0 9px;font-size:8.6px}
  .hero{margin:10px;min-height:612px}.hero-img{height:370px;background-position:64% 15%}.hero-content{padding:16px 13px 0;max-width:300px}.hero h1{font-size:27px;max-width:250px}.hero-sub{font-size:9.8px;max-width:254px}.feature-pills{max-width:268px;gap:6px}.feature-pill{padding:7px 8px;font-size:8.2px}.bonus-card{left:11px;right:11px;bottom:11px;padding:14px}.bonus-card .amount{font-size:30px}
  .quick{margin:0 10px 12px;gap:6px}.quick-item{min-height:76px;padding:8px 4px}.section{padding:10px}.banner{height:168px}.hosts{gap:8px}.host{flex-basis:46%}.steps,.footer{margin-left:10px;margin-right:10px}
}
@media(min-width:480px){
  .hero{min-height:650px}.hero-img{height:410px}.hero-content{padding:24px 20px 0;max-width:370px}.hero h1{font-size:35px;max-width:318px}.hero-sub{max-width:318px;font-size:11.4px}.feature-pills{max-width:335px}.banner-grid{grid-template-columns:1fr 1fr}.banner{height:190px}.banner .txt{max-width:70%}.host{flex-basis:31.5%}.quick{grid-template-columns:repeat(6,minmax(0,1fr))}.quick-item{min-height:78px}.quick-item b{font-size:8px}.quick-item small{display:none}
}
