@charset "UTF-8";
:root { color-scheme: dark; --bg:#100c1b; --panel:#1d1630; --line:#3d3156; --ink:#faf8ff; --muted:#bfb4d1; --lime:#d9ff4b; --violet:#b393ff; --paper:#f6f4fa; --dark-ink:#251a36; --dark-muted:#675b76; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { --sticky-cta-height:calc(90px + env(safe-area-inset-bottom)); scroll-behavior:smooth; scroll-padding-top:20px; scroll-padding-bottom:calc(var(--sticky-cta-height) + 16px); }
body { margin:0; background:#09070f; color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-underline-offset:4px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #9160f5; outline-offset:5px; }
button:disabled { cursor:wait; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
[hidden] { display:none !important; }
.page { width:min(100%,430px); margin:auto; padding-bottom:var(--sticky-cta-height); overflow:hidden; background:var(--bg); }
.icon { width:20px; height:20px; flex-shrink:0; }
.hero { position:relative; isolation:isolate; padding:22px 20px 30px; background:radial-gradient(ellipse at 110% 20%,#5d247a70,transparent 52%),radial-gradient(ellipse at -20% 60%,#126f7550,transparent 44%),var(--bg); }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(#c6a5ff08 1px,transparent 1px),linear-gradient(90deg,#c6a5ff08 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(#000,transparent 78%); pointer-events:none; }
.brand-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.brand-logo { width:108px; height:auto; }
.header-link { display:inline-flex; min-height:44px; align-items:center; gap:6px; color:#d8cde9; font-size:14px; text-decoration:none; }
.header-link .icon { filter:invert(1); width:16px; height:16px; }
.hero-copy { margin:20px 0 28px; }
.eyebrow,.section-label { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--violet); }
h1 { margin:10px 0 12px; font-size:clamp(32px,9.6vw,41px); line-height:1.08; letter-spacing:-1.7px; font-weight:800; }
h1 em { display:inline-block; color:var(--lime); font-style:normal; transform:rotate(-2deg); transform-origin:left center; text-shadow:0 0 28px #c9ff4b25; }
.hero-lead { max-width:350px; color:#d3c9e1; font-size:16px; line-height:1.5; }
:lang(ms) h1 { font-size:clamp(30px,9.4vw,39px); line-height:1.13; letter-spacing:-1.1px; }
:lang(ms) .section-label,:lang(ms) .eyebrow { letter-spacing:.7px; }
:lang(ms) .earning-heading { align-items:flex-start; }
:lang(ms) .earning-heading a { white-space:normal; max-width:105px; flex-shrink:0; line-height:1.4; }
:lang(ms) .creator-media figcaption>span:first-child { max-width:64%; }
:lang(ms) .growth h2 { font-size:29px; }
.creator-media { position:relative; overflow:hidden; width:calc(100% - 14px); height:272px; border:2px solid #c9acff; border-radius:12px; background:#29193e; transform:rotate(-3deg); box-shadow:7px 8px 0 #432765,0 0 32px #a660fa38; }
.creator-media>img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.creator-media::after { content:""; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,rgba(11,6,20,.9)); pointer-events:none; }
.session-label { position:absolute; z-index:1; top:12px; left:12px; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #be97ed80; border-radius:6px; background:#160d27e8; font-size:11px; font-weight:650; letter-spacing:.6px; line-height:1.2; transform:rotate(3deg); }
.session-label::before { content:""; width:6px; height:6px; border-radius:50%; background:#ff77bc; }
.creator-media figcaption { position:absolute; z-index:1; left:14px; right:14px; bottom:43px; display:flex; justify-content:space-between; gap:12px; align-items:end; font-size:13px; line-height:1.35; }
.creator-media figcaption strong { display:block; font-size:17px; }
.view-count { text-align:right; color:#e5d9ef; font-size:12px; white-space:nowrap; }
.view-count b { display:block; color:var(--lime); font-size:25px; letter-spacing:-.7px; }
.earning-summary { position:relative; z-index:2; margin:-29px 0 23px 20px; padding:10px 16px 14px; color:var(--dark-ink); background:linear-gradient(120deg,#fcf7ff,#eee2ff 70%,#e7ebff); border:1px solid #fff9; border-radius:7px; transform:rotate(2deg); box-shadow:5px 6px 0 #07040c66,0 8px 35px #b074ff1c; }
.earning-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.earning-heading p { color:#594569; font-size:12px; font-weight:650; }
.earning-heading a { display:inline-flex; align-items:center; min-height:36px; color:#69418e; font-size:12px; white-space:nowrap; }
.earning-amount { display:flex; align-items:baseline; gap:10px; line-height:1.15; margin:0 0 6px; }
.earning-amount strong { color:#382048; font-size:36px; letter-spacing:-1.8px; font-weight:800; white-space:nowrap; }
.earning-amount strong span { padding:0 5px; color:#9a80b0; font-weight:400; }
.earning-amount>span { color:#675374; font-size:12px; white-space:nowrap; }
.earning-context { font-size:12px; color:#6a547a; line-height:1.45; }
.button { display:flex; width:100%; min-height:54px; padding:14px 17px; justify-content:space-between; align-items:center; gap:10px; border:0; border-radius:11px; font-size:16px; line-height:1.35; font-weight:750; text-align:left; transition:transform .15s,background .15s; }
.button:active { transform:translateY(1px); }
.button-primary { background:linear-gradient(110deg,#d9ff4b,#e8ff85); color:#1c2410; box-shadow:0 4px 22px #d9ff4b18,inset 0 1px 0 #ffffff80; }
.button-outline { color:#f4effa; border:1px solid #80699e; background:transparent; }
.button-outline .icon { filter:invert(1); }
.decision-copy { padding:8px 0 0; text-align:center; font-size:12px; color:#c3b6d2; }
.metrics { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:30px 0 0; padding:24px 0 14px; border-top:1px solid #584169; gap:20px; text-align:center; }
.metrics>div { min-width:0; }
.metrics::after { content:""; position:absolute; left:50%; top:24px; bottom:14px; width:1px; background:#584169; transform:translateX(-50%); pointer-events:none; }
.metrics dt { color:white; font-size:31px; letter-spacing:-1.3px; line-height:1.2; font-weight:750; }
.metrics dd { margin:4px 0 0; color:#cbbfd7; font-size:13px; }
.section { position:relative; padding:52px 20px; }
h2 { font-size:32px; font-weight:750; line-height:1.16; letter-spacing:-1px; margin:12px 0 14px; }
.section-intro { color:var(--muted); font-size:16px; line-height:1.65; }
.light { color:var(--dark-ink); background:var(--paper); color-scheme:light; }
.light .section-label { color:#7243bd; }
.light .section-intro { color:var(--dark-muted); }
.tasks { padding-top:43px; padding-bottom:50px; color:var(--ink); color-scheme:dark; background:radial-gradient(ellipse at 0 22%,#6733b02b,transparent 48%),radial-gradient(ellipse at 110% 78%,#22536b24,transparent 40%),#100c1b; }
.tasks::before { content:""; position:absolute; height:1px; inset:0 20px auto; background:linear-gradient(90deg,transparent,#a97cff88,#6debd766,transparent); pointer-events:none; }
.tasks .section-label { color:#c1a5ff; }
.tasks .section-intro { color:#c7bdd7; }
.growth::before { content:""; position:absolute; height:24px; inset:-10px -10px auto; background:inherit; transform:rotate(-2deg); pointer-events:none; }
.task-list { margin:30px 3px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; padding-bottom:23px; }
.task-card { --task-accent:#b89aff; --task-glow:#965cff29; position:relative; isolation:isolate; display:flex; flex-direction:column; width:100%; gap:12px; align-items:stretch; padding:12px 12px 17px; color:var(--ink); text-align:left; background:radial-gradient(ellipse at 24% 0,var(--task-glow),transparent 62%),#171023; border:1px solid #76628f70; border-radius:16px; box-shadow:3px 4px 0 #241534,0 12px 24px #0003,inset 0 1px 0 #e1c4ff12; transform:rotate(-1.5deg); transition:box-shadow .15s,border-color .15s; }
.task-card::before { content:""; position:absolute; left:20%; right:20%; top:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--task-accent),transparent); box-shadow:0 0 12px var(--task-accent); opacity:.65; pointer-events:none; }
.task-card[data-task="picture"] { --task-accent:#d9ff4b; --task-glow:#b4e65124; }
.task-card[data-task="voice"] { --task-accent:#6ce7e0; --task-glow:#31d3ce24; }
.task-card[data-task="video"] { --task-accent:#ffae9e; --task-glow:#fc887b24; }
.task-card[data-task="text"] { --task-accent:#e4a2ff; --task-glow:#c568f22b; }
.task-card[data-task="ai"] { --task-accent:#a2a8ff; --task-glow:#7882ff30; }
.task-card:hover { border-color:var(--task-accent); box-shadow:3px 4px 0 #241534,0 0 25px var(--task-glow); }
.task-card:first-child { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; min-height:182px; padding:16px 18px 16px 6px; gap:10px; background:radial-gradient(ellipse at 12% 20%,var(--task-glow),transparent 70%),#191522; border-color:#a5b66e80; transform:rotate(1deg); box-shadow:4px 5px 0 #2c3030,0 0 26px #c5ef4210; }
.task-card:nth-child(3),.task-card:nth-child(5) { transform:translateY(23px) rotate(1.5deg); }
.task-card:nth-child(4) { transform:rotate(-1deg); }
.task-art { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; mix-blend-mode:screen; mask-image:radial-gradient(ellipse farthest-corner,#000 60%,transparent 100%); }
.task-body { display:block; }
.task-body strong { display:block; margin-bottom:6px; padding-right:12px; font-size:16px; line-height:1.3; }
.task-card:first-child .task-body strong { font-size:21px; }
.task-description { display:block; color:#cbbfd9; font-size:14px; line-height:1.5; }
.task-card>.icon { position:absolute; top:12px; right:12px; width:23px; height:23px; padding:3px; background:var(--task-accent); border-radius:50%; }
.task-card:first-child>.icon { top:auto; bottom:12px; right:12px; }
.task-note { display:flex; align-items:start; gap:10px; margin-top:24px; font-size:13px; color:#bcb0cd; }
.task-note .icon { margin-top:3px; filter:invert(.85); }
.value { padding-top:57px; padding-bottom:50px; background:radial-gradient(ellipse at 100% 35%,#59368338,transparent 65%),linear-gradient(160deg,#1c1230,var(--bg) 70%); border-top:1px solid #75539430; }
.value-flow { margin-top:34px; }
.value-flow li { display:grid; grid-template-columns:46px minmax(0,1fr); gap:15px; position:relative; padding:17px 0 23px; border-top:1px solid #493356; }
.value-flow li:nth-child(even) { margin-left:28px; }
.flow-index { color:#b89add; font-size:37px; font-weight:750; letter-spacing:-2px; line-height:1.15; text-shadow:0 0 20px #b37aff30; }
.value-flow li:last-child { padding-bottom:0; }
.value-flow li:last-child .flow-index { color:var(--lime); }
.value-flow h3 { font-size:17px; font-weight:650; margin:3px 0 5px; }
.value-flow p { font-size:14px; color:var(--muted); }
.value-statement { margin:29px -7px 0; padding:19px 18px; color:#283413; background:linear-gradient(105deg,#d9ff4b,#e8ff9a); font-size:24px; line-height:1.4; font-weight:750; letter-spacing:-.5px; transform:rotate(-2deg); box-shadow:0 0 30px #d9ff4b12; }
.community { padding-top:16px; padding-bottom:57px; background:radial-gradient(ellipse at 0 30%,#68439638,transparent 60%),var(--bg); }
.community-panel { position:relative; }
.community-photo { position:relative; z-index:1; width:calc(100% - 10px); height:auto; aspect-ratio:3/2; object-fit:cover; border:2px solid #ac8ad5; border-radius:12px; transform:rotate(2.5deg); box-shadow:5px 6px 0 #40265c,0 0 28px #a35ee530; }
.community-copy { margin:-18px -1px 0 16px; padding:48px 18px 23px; border:1px solid #80619980; background:radial-gradient(ellipse at 100% 0,#59347355,transparent 65%),#21162d; border-radius:12px; box-shadow:inset 0 1px 0 #eddcff0f; }
.community-copy h2 { margin-left:-7px; margin-right:-5px; font-size:29px; }
.support-list { margin:23px 0; }
.support-list li { display:flex; align-items:start; gap:12px; padding:14px 0; border-top:1px solid #493555; }
.support-list .icon { margin-top:4px; filter:invert(.85) sepia(.15); }
.support-list strong { display:block; font-size:15px; margin-bottom:3px; }
.support-list p { color:#c5b8d5; font-size:14px; line-height:1.5; }
.growth { padding-top:44px; padding-bottom:46px; background:radial-gradient(ellipse at 100% 0,#d4cafc,transparent 70%),#eee7f7; }
.growth-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:22px 15px; margin:32px 3px 0; padding-bottom:22px; }
.growth-card { padding:18px 14px; background:#fbf9ff; border:1px solid #d6c8e3; border-radius:3px; transform:rotate(-2deg); }
.growth-card:nth-child(2) { background:transparent; border-color:#bba8cd; transform:translateY(22px) rotate(2deg); }
.growth-card:nth-child(3) { background:var(--lime); border-color:#c0d687; transform:rotate(1deg); }
.growth-card:nth-child(4) { transform:translateY(22px) rotate(-1.5deg); }
.growth-card .icon { margin-bottom:12px; width:23px; height:23px; }
.growth-card h3 { margin:0 0 6px; font-size:16px; line-height:1.4; }
.growth-card p { color:var(--dark-muted); font-size:14px; line-height:1.6; }
.settlement { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:35px 5px 0 1px; padding:20px 16px; background:#fff; border:1px solid #bea5d2; border-left:5px solid #765291; border-radius:3px; transform:rotate(-1.5deg); box-shadow:5px 5px 0 #d0bcdf; }
.settlement .settlement-label { color:#4f3e61; font-size:13px; }
.settlement .settlement-status { display:flex; align-items:center; gap:5px; margin-top:3px; color:#496521; font-size:12px; }
.settlement-status .icon { width:14px; height:14px; }
.settlement strong { color:#322046; font-size:30px; letter-spacing:-1.4px; white-space:nowrap; }
.fine-print { color:var(--dark-muted); font-size:12px; line-height:1.5; margin-top:19px; }
.getting-started { background:linear-gradient(#fbf9ff,#fff 38%); }
.step-list { margin-top:29px; }
.step-list li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid #e6deee; }
.step-list li:first-child { margin:0 -3px 5px; padding:21px 16px 12px; background:#eee7f7; border:1px solid #d6c5e5; border-radius:4px; }
.step-list li:last-child { border-bottom:0; }
.step-number { color:#745395; font-size:34px; font-weight:750; letter-spacing:-1px; line-height:1.2; }
.step-list h3 { font-size:17px; line-height:1.4; margin:3px 0 6px; }
.step-list p { color:var(--dark-muted); font-size:14px; }
.text-button { display:inline-flex; gap:8px; align-items:center; border:0; background:none; color:#7243bd; padding:10px 0; min-height:44px; font-size:14px; font-weight:650; }
.faq { margin-top:34px; border-top:1px solid #e6deee; padding-top:27px; }
.faq>h3 { font-size:21px; letter-spacing:-.4px; margin-bottom:12px; }
details { border-bottom:1px solid #e6deee; scroll-margin-top:22px; }
summary { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:64px; padding:16px 0; cursor:pointer; list-style:none; font-size:15px; font-weight:650; line-height:1.5; }
summary::-webkit-details-marker { display:none; }
summary .icon { width:18px; height:18px; transition:transform .2s; }
details[open] summary .icon { transform:rotate(45deg); }
details>p { color:var(--dark-muted); padding:0 0 20px; font-size:14px; line-height:1.7; }
.conversion { isolation:isolate; padding-top:49px; padding-bottom:43px; background:radial-gradient(ellipse at 105% 15%,#71318475,transparent 60%),radial-gradient(ellipse at -15% 80%,#235c7750,transparent 55%),#160e25; }
.conversion::before { content:""; position:absolute; z-index:-1; top:30px; right:-145px; width:280px; height:280px; border:1px solid #bd7efe40; border-radius:50%; box-shadow:0 0 36px #9e54ff20,inset 0 0 28px #ba64ff14; transform:rotate(-30deg) scaleX(.65); pointer-events:none; }
.conversion h2 { font-size:39px; margin-bottom:25px; }
.conversion h2 em { display:inline-block; margin-top:7px; padding:3px 6px 6px; color:#222d0e; background:var(--lime); font-size:clamp(27px,8.1vw,34px); font-style:normal; transform:rotate(-2deg); }
.conversion-list { margin:22px 0 27px; }
.conversion-list li { display:flex; align-items:center; gap:10px; color:#e2d8ec; font-size:14px; margin:10px 0; }
.conversion-list .icon { filter:invert(.9); width:17px; height:17px; }
.conversion-caption { color:#b9a9c9; font-size:12px; line-height:1.6; margin-top:14px; }
.page-footer { padding:24px 20px calc(29px + env(safe-area-inset-bottom)); color:#a99bbb; background:#0d0915; }
.page-footer .brand-logo { width:85px; opacity:.9; margin-bottom:14px; }
.page-footer p { font-size:12px; line-height:1.65; }
.footer-brand { display:block; margin-top:12px; font-size:12px; color:#cfbedf; }
.sticky-cta { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,430px); display:flex; align-items:center; gap:13px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#180f25f5; border-top:1px solid #655077; z-index:30; box-shadow:0 -8px 28px #0003; }
.sticky-cta>div { min-width:0; flex:1; }
.sticky-cta strong { font-size:14px; display:block; line-height:1.35; }
.sticky-cta span { font-size:12px; color:#bcadca; }
.sticky-cta .button { width:auto; min-width:118px; min-height:46px; padding:12px; font-size:14px; }
.chat-notice { position:fixed; z-index:60; bottom:calc(var(--sticky-cta-height) + 12px); left:50%; transform:translateX(-50%); width:min(calc(100% - 32px),398px); padding:19px; background:#f9f7fc; color:#30203d; border:1px solid #c8b6db; border-radius:14px; box-shadow:0 15px 60px #0007; }
.chat-notice p { font-size:14px; }
.chat-notice-actions { display:flex; gap:22px; }
.skip-link { position:fixed; left:12px; top:-100px; z-index:100; padding:12px; background:white; color:#20152e; }
.skip-link:focus { top:12px; }
.no-script { width:min(100%,430px); padding:18px; margin:auto; color:#2d203c; background:#f6ecff; font-size:14px; }
@media(max-width:350px) {
  .hero,.section { padding-left:16px; padding-right:16px; }
  .hero-copy { margin-top:14px; }
  .creator-media { height:241px; }
  .creator-media figcaption { left:10px; right:10px; gap:8px; }
  .creator-media figcaption strong { font-size:15px; }
  .earning-summary { margin-left:12px; padding-left:12px; padding-right:12px; }
  .earning-amount { gap:8px; }
  .earning-amount strong { font-size:31px; }
  .task-list { gap:17px 12px; }
  .task-card { padding:9px 9px 14px; }
  .task-card:first-child { min-height:177px; padding:16px 14px 16px 5px; }
  .task-card:first-child .task-body strong { font-size:19px; }
  .task-body strong { font-size:15px; padding-right:0; }
  .task-description { font-size:13px; }
  h2 { font-size:28px; }
  .value-flow li { grid-template-columns:40px minmax(0,1fr); gap:12px; }
  .value-flow li:nth-child(even) { margin-left:17px; }
  .value-statement { font-size:21px; padding:18px 15px; }
  .community-copy { margin-left:8px; padding-left:15px; padding-right:15px; }
  .community-copy h2 { font-size:25px; }
  .metrics dt { font-size:28px; }
  .growth-grid { gap:20px 12px; }
  .growth-card { padding:15px 11px; }
  .growth-card h3 { font-size:15px; }
  .settlement { padding:18px 12px; gap:9px; }
  .settlement strong { font-size:27px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }