:root{
  --bg:#0d0b14;
  --bg-2:#151120;
  --bg-3:#1c1730;
  --card:#1a1528;
  --line:rgba(255,255,255,.09);
  --text:#f2eefb;
  --muted:#a79fb8;
  --mango:#ffb724;
  --mango-2:#ff8a1f;
  --pink:#ff5c8a;
  --violet:#8b6cff;
  --teal:#2fd6c3;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.28;font-weight:800;letter-spacing:.5px;}
h1{font-size:30px;}
h2{font-size:24px;}
h3{font-size:17px;}
p{color:var(--muted);font-size:15px;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px;}
.sec{padding:64px 0;}
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:2px;color:var(--mango);
  border:1px solid rgba(255,183,36,.35);border-radius:999px;padding:4px 14px;margin-bottom:14px;
  background:rgba(255,183,36,.07);
}
.sec-head{max-width:720px;margin-bottom:36px;}
.sec-head p{margin-top:10px;}
.grad-text{
  background:linear-gradient(96deg,var(--mango) 0%,var(--pink) 55%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(13,11,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;white-space:nowrap;}
.brand img{height:30px;width:auto;border-radius:8px;}
.nav{display:none;}
.nav a{font-size:14px;color:var(--muted);padding:6px 2px;transition:color .2s;}
.nav a:hover{color:var(--mango);}
.header-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(96deg,var(--mango),var(--mango-2));
  color:#231600;font-weight:800;font-size:13px;
  padding:8px 16px;border-radius:999px;white-space:nowrap;
}
.menu-btn{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-3);cursor:pointer;padding:0 9px;
}
.menu-btn span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s;}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-nav{display:none;border-top:1px solid var(--line);padding:8px 0 16px;}
.mobile-nav.open{display:block;}
.mobile-nav a{display:block;padding:11px 4px;font-size:15px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.05);}
.mobile-nav a:last-child{border-bottom:0;}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:48px 0 56px;
  background:
    radial-gradient(900px 420px at 82% -8%,rgba(139,108,255,.30),transparent 62%),
    radial-gradient(700px 380px at 6% 8%,rgba(255,183,36,.20),transparent 60%),
    radial-gradient(620px 420px at 52% 108%,rgba(255,92,138,.16),transparent 65%),
    linear-gradient(180deg,#0d0b14 0%,#130f1f 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
}
.hero-grid{position:relative;z-index:2;display:grid;gap:34px;}
.hero h1{margin:6px 0 16px;font-size:32px;}
.hero h1 em{font-style:normal;}
.hero-lead{font-size:15.5px;color:#c3bacf;max-width:560px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px;}
.hero-tags span{
  font-size:12.5px;color:#e9e2f7;border:1px solid var(--line);
  background:rgba(255,255,255,.04);border-radius:999px;padding:5px 12px;
}
.dl-block{border:1px dashed rgba(255,183,36,.42);border-radius:var(--radius);padding:16px;background:rgba(255,183,36,.05);}
.dl-title{font-size:12.5px;letter-spacing:1.5px;color:var(--mango);margin-bottom:12px;}
.dl-row{display:grid;gap:10px;grid-template-columns:1fr;}
.dl-btn{
  display:flex;align-items:center;gap:11px;
  border-radius:14px;padding:11px 14px;font-weight:800;font-size:14px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(140deg,#241c3c,#171127);
  transition:transform .2s,border-color .2s;
}
.dl-btn:hover{transform:translateY(-2px);border-color:rgba(255,183,36,.55);}
.dl-btn .ico{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  display:grid;place-items:center;font-size:16px;
  background:linear-gradient(140deg,rgba(255,183,36,.22),rgba(139,108,255,.22));
}
.dl-btn small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.5px;}
.dl-btn.android .ico{color:#7ef0a8;}
.dl-btn.ios .ico{color:#cfd6ff;}
.dl-btn.other .ico{color:var(--mango);}
.dl-note{font-size:12px;color:#8d8599;margin-top:10px;}

/* hero phone art */
.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.poster{
  position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  aspect-ratio:3/4;background:var(--bg-3);
  box-shadow:0 18px 42px rgba(0,0,0,.5);
}
.poster img{width:100%;height:100%;object-fit:cover;}
.poster .tag{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 10px 9px;font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,6,14,.92));
}
.poster.tall{aspect-ratio:2/3;transform:translateY(24px);}
.poster-shift{margin-top:-16px;}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,183,36,.10),rgba(255,92,138,.10),rgba(139,108,255,.10));
  overflow:hidden;white-space:nowrap;
}
.ticker-inner{display:inline-block;padding:11px 0;animation:tick 26s linear infinite;}
.ticker-inner span{font-size:13px;color:#ded5ee;margin-right:26px;letter-spacing:.5px;}
.ticker-inner span b{color:var(--mango);}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- ai section ---------- */
.ai-sec{background:linear-gradient(180deg,#0d0b14,#161125 60%,#0d0b14);}
.ai-layout{display:grid;gap:24px;}
.ai-cards{display:grid;gap:14px;grid-template-columns:1fr;}
.ai-card{
  border:1px solid var(--line);border-radius:16px;padding:18px;
  background:linear-gradient(150deg,rgba(139,108,255,.12),rgba(255,255,255,.02));
}
.ai-card .num{
  display:inline-block;font-size:12px;font-weight:800;color:#1a1206;
  background:linear-gradient(96deg,var(--teal),#7ef0a8);border-radius:6px;padding:2px 8px;margin-bottom:10px;
}
.ai-card h3{margin-bottom:6px;}
.ai-card p{font-size:14px;}
.ai-visual{
  border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.ai-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;}
.ai-visual .cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,6,14,.94));
  font-size:13px;color:#e6defa;font-weight:700;
}

/* ---------- hot list ---------- */
.hot-sec{background:#0b0912;}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.chip{
  font-size:13px;color:#cfc6dd;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;background:rgba(255,255,255,.03);cursor:pointer;transition:.2s;
}
.chip:hover,.chip.active{color:#231600;background:linear-gradient(96deg,var(--mango),var(--mango-2));border-color:transparent;font-weight:700;}
.drama-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));}
.drama-card{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;
  transition:transform .25s,border-color .25s;
}
.drama-card:hover{transform:translateY(-4px);border-color:rgba(255,183,36,.45);}
.drama-card .cover{position:relative;aspect-ratio:3/4;overflow:hidden;}
.drama-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.drama-card:hover .cover img{transform:scale(1.05);}
.drama-card .date{
  position:absolute;top:9px;left:9px;font-size:11px;color:#1a1206;font-weight:800;
  background:rgba(255,183,36,.94);border-radius:6px;padding:2px 7px;
}
.drama-body{padding:12px 13px 15px;display:flex;flex-direction:column;gap:8px;flex:1;}
.drama-body h3{font-size:15px;}
.drama-body p{font-size:13px;line-height:1.6;}
.drama-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.drama-tags em{
  font-style:normal;font-size:11px;color:#bdb2d4;border:1px solid rgba(139,108,255,.4);
  background:rgba(139,108,255,.12);border-radius:5px;padding:1px 7px;
}

/* ---------- wall ---------- */
.wall-sec{background:linear-gradient(180deg,#0b0912,#141021);}
.wall{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));}
.wall figure{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--bg-3);}
.wall img{width:100%;height:100%;object-fit:cover;}

/* ---------- steps ---------- */
.steps-sec{background:#0d0b14;}
.steps{display:grid;gap:16px;counter-reset:step;}
.step{
  position:relative;border:1px solid var(--line);border-radius:16px;padding:22px 18px 18px;
  background:linear-gradient(160deg,rgba(255,183,36,.09),rgba(255,255,255,.02));
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:-16px;left:18px;font-size:26px;font-weight:900;
  color:rgba(255,183,36,.85);letter-spacing:-1px;
}
.step h3{margin:8px 0 6px;}
.step p{font-size:14px;}

/* ---------- faq ---------- */
.faq-sec{background:linear-gradient(180deg,#0d0b14,#120e1e);}
.faq-list{display:grid;gap:12px;}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;padding:16px;color:var(--text);
  font-size:15px;font-weight:700;font-family:inherit;line-height:1.5;
}
.faq-q .qmark{
  flex:0 0 24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#1a1206;background:linear-gradient(96deg,var(--mango),var(--mango-2));
}
.faq-q .arrow{margin-left:auto;flex:0 0 auto;color:var(--muted);transition:transform .25s;font-size:13px;}
.faq-item.open .faq-q .arrow{transform:rotate(180deg);}
.faq-a{display:none;padding:0 16px 16px 52px;font-size:14px;color:var(--muted);}
.faq-item.open .faq-a{display:block;}

/* ---------- reviews ---------- */
.review-sec{background:#0b0912;}
.review-grid{display:grid;gap:14px;grid-template-columns:1fr;}
.review{
  border:1px solid var(--line);border-radius:16px;padding:18px;
  background:linear-gradient(160deg,rgba(255,92,138,.10),rgba(255,255,255,.02));
}
.review .stars{color:var(--mango);font-size:13px;letter-spacing:2px;margin-bottom:8px;}
.review p{font-size:14px;color:#ddd4ec;}
.review .who{display:flex;align-items:center;gap:9px;margin-top:14px;}
.review .avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#1a1206;background:linear-gradient(140deg,var(--mango),var(--pink));
}
.review .who b{font-size:13px;display:block;}
.review .who small{font-size:11px;color:var(--muted);}

/* ---------- privacy ---------- */
.privacy-sec{background:linear-gradient(180deg,#0b0912,#141021);}
.privacy-layout{display:grid;gap:24px;}
.privacy-list{display:grid;gap:12px;}
.pv{
  display:flex;gap:13px;border:1px solid var(--line);border-radius:14px;padding:15px;
  background:rgba(47,214,195,.06);
}
.pv .pill{
  flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:rgba(47,214,195,.16);color:var(--teal);
}
.pv h3{font-size:15px;margin-bottom:4px;}
.pv p{font-size:13.5px;}
.privacy-side{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;
}
.privacy-side img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.privacy-side .cap{
  position:absolute;inset:auto 0 0 0;padding:28px 16px 14px;font-size:13px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(8,6,14,.94));
}

/* ---------- creator ---------- */
.creator-sec{background:#0d0b14;}
.creator-grid{display:grid;gap:14px;grid-template-columns:1fr;}
.cr{
  border-radius:16px;padding:20px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(139,108,255,.16),rgba(255,255,255,.015));
}
.cr h3{margin-bottom:8px;}
.cr p{font-size:14px;}
.cr .mini{font-size:12px;color:var(--violet);font-weight:800;letter-spacing:1.5px;margin-bottom:8px;display:block;}

/* ---------- community ---------- */
.community-sec{background:linear-gradient(180deg,#0d0b14,#161125);}
.comm-layout{display:grid;gap:22px;}
.comm-cards{display:grid;gap:12px;grid-template-columns:1fr;}
.comm{
  border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card);
  display:flex;gap:12px;align-items:flex-start;
}
.comm .dot{
  flex:0 0 9px;height:9px;border-radius:50%;margin-top:8px;
  background:linear-gradient(140deg,var(--mango),var(--pink));
  box-shadow:0 0 0 4px rgba(255,183,36,.12);
}
.comm h3{font-size:15px;margin-bottom:4px;}
.comm p{font-size:13.5px;}
.comm-visual{border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative;}
.comm-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.comm-visual .cap{
  position:absolute;inset:auto 0 0 0;padding:26px 16px 14px;font-size:13px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(8,6,14,.94));
}

/* ---------- download ---------- */
.dl-sec{
  background:
    radial-gradient(800px 380px at 50% -10%,rgba(255,183,36,.20),transparent 60%),
    radial-gradient(700px 360px at 90% 100%,rgba(139,108,255,.22),transparent 62%),
    #0a0811;
  border-top:1px solid var(--line);
}
.dl-steps{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:30px;}
.dl-steps .mini-step{
  border:1px solid var(--line);border-radius:13px;padding:14px;background:rgba(255,255,255,.03);
  font-size:13.5px;color:#cfc6dd;
}
.dl-steps .mini-step b{color:var(--mango);display:block;font-size:13px;margin-bottom:4px;letter-spacing:.5px;}
.dl-panel{
  border:1px solid rgba(255,183,36,.35);border-radius:22px;padding:24px 18px;
  background:linear-gradient(160deg,rgba(255,183,36,.10),rgba(139,108,255,.10));
  text-align:center;
}
.dl-panel h2{margin-bottom:10px;}
.dl-panel > p{max-width:600px;margin:0 auto 22px;}
.dl-grid{display:grid;gap:10px;grid-template-columns:1fr;max-width:760px;margin:0 auto;}
.dl-big{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:14px;padding:14px 16px;font-weight:800;font-size:15px;
  border:1px solid rgba(255,255,255,.16);background:#1a1428;transition:transform .2s,border-color .2s;
}
.dl-big:hover{transform:translateY(-2px);border-color:rgba(255,183,36,.6);}
.dl-big .ico{font-size:17px;}
.dl-big.android .ico{color:#7ef0a8;}
.dl-big.ios .ico{color:#cfd6ff;}
.dl-big.other .ico{color:var(--mango);}
.dl-big small{font-weight:500;font-size:11.5px;color:var(--muted);display:block;}

/* ---------- footer ---------- */
.site-footer{background:#080610;border-top:1px solid var(--line);padding:40px 0 28px;}
.footer-top{display:grid;gap:24px;margin-bottom:26px;}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;margin-bottom:10px;}
.footer-brand img{height:30px;border-radius:8px;}
.footer-cols{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));}
.footer-col h3{font-size:13px;letter-spacing:1.5px;color:var(--mango);margin-bottom:10px;}
.footer-col a{display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:color .2s;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:space-between;align-items:center;font-size:12px;color:#77708a;
}
.footer-bottom time{color:#8b83a0;}

/* ---------- responsive ---------- */
@media (min-width:768px){
  h1{font-size:40px;}
  h2{font-size:30px;}
  .hero{padding:64px 0 72px;}
  .hero h1{font-size:42px;}
  .dl-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero-art{gap:16px;}
  .poster.tall{transform:translateY(30px);}
  .drama-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .creator-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dl-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dl-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer-cols{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ai-cards{grid-template-columns:1fr;}
  .ai-layout{grid-template-columns:1.25fr .75fr;align-items:start;}
  .privacy-layout{grid-template-columns:1.35fr .65fr;align-items:start;}
  .comm-layout{grid-template-columns:1.1fr .9fr;align-items:start;}
  .footer-top{grid-template-columns:1fr 1.4fr;align-items:start;}
}
@media (min-width:1024px){
  .sec{padding:84px 0;}
  .nav{display:flex;gap:22px;align-items:center;}
  .menu-btn{display:none;}
  .mobile-nav{display:none !important;}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
  .hero h1{font-size:48px;}
  .drama-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .wall{grid-template-columns:repeat(5,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .review-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ai-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .comm-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}