:root{
  --bg:#0B0614;--panel:#160B28;--panel2:#1E1036;--line:rgba(168,85,247,.35);
  --neon:#A855F7;--neon2:#C084FC;--rec:#FF2D55;--text:#F5F0FF;--muted:#A89BC4;
  --ok:#34D399;--shadow:0 18px 50px rgba(0,0,0,.45);
  --display:"Syne",system-ui,sans-serif;--ui:"Manrope",system-ui,sans-serif;
  --radius:22px;--safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ui);background:var(--bg);color:var(--text);line-height:1.55;padding-bottom:88px}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92%);margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(168,85,247,.15);border:1px solid var(--line);color:var(--neon2);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:999px;border:0;font-weight:800;font-family:inherit;cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(135deg,var(--rec),#FF6B8A);color:#fff;box-shadow:0 10px 30px rgba(255,45,85,.35)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:hover{transform:translateY(-1px)}

.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(11,6,20,.82);border-bottom:1px solid rgba(168,85,247,.2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px}
.brand img{width:36px;height:36px;border-radius:10px}
.nav-links{display:none;gap:14px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
@media(min-width:900px){.nav-links{display:flex}}

.hero{padding:28px 0 40px;background:radial-gradient(1200px 500px at 70% -10%,rgba(168,85,247,.35),transparent 60%)}
.hero-grid{display:grid;gap:22px}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero h1{font-family:var(--display);font-size:clamp(30px,5vw,52px);line-height:1.08;margin:14px 0 12px}
.hero .lead{color:var(--muted);font-size:17px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.fine{color:var(--muted);font-size:13px}
.ba-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:28px;padding:14px;box-shadow:var(--shadow)}
.ba-title{font-weight:800;margin:0 0 10px;font-size:14px;color:var(--neon2)}
.ba-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#2a1848}
.ba-frame img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800}
.ba-frame.after .rec{position:absolute;right:10px;top:10px;color:#fff;font-size:11px;font-weight:800;background:rgba(255,45,85,.85);padding:4px 8px;border-radius:999px}
.ba-frame.after .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--rec);font-size:22px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ba-slogan{margin:12px 0 0;text-align:center;font-family:var(--display);font-weight:800;font-size:18px}

.section{padding:48px 0}.section.soft{background:linear-gradient(180deg,rgba(168,85,247,.08),transparent)}
.sec-h{margin-bottom:22px}.sec-h h2{font-family:var(--display);font-size:clamp(26px,4vw,36px);margin:10px 0 8px;line-height:1.15}
.sec-h p{color:var(--muted);max-width:62ch;margin:0}

.feat-grid,.use-grid,.examples,.method-grid,.plus-grid,.guide-grid{display:grid;gap:12px}
@media(min-width:700px){.feat-grid,.use-grid,.plus-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.examples{grid-template-columns:repeat(3,1fr)}.method-grid{grid-template-columns:1fr 1fr}.guide-grid{grid-template-columns:1fr 1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:14px}
.card .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(168,85,247,.2);margin-bottom:10px;font-size:20px}
.use-grid li{list-style:none;margin:0;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);font-weight:700}
.use-grid{padding:0;margin:0}

.ex-card{overflow:hidden;padding:0}
.ex-card img{aspect-ratio:1;object-fit:cover;width:100%}
.ex-card .cap{padding:12px 14px}.ex-card .cap strong{display:block;margin-bottom:4px}.ex-card .cap span{color:var(--muted);font-size:13px}

.steps{display:grid;gap:12px;margin-top:18px}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.step .num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--neon),var(--rec));font-weight:800;margin-bottom:10px}
.step h3{margin:0 0 6px;font-size:16px}.step p{margin:0;color:var(--muted);font-size:14px}
.flow-img{width:100%;border-radius:24px;border:1px solid var(--line);margin:8px 0 18px}

.sites-cloud{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sites-cloud li{padding:10px 14px;border-radius:999px;background:rgba(168,85,247,.12);border:1px solid var(--line);font-weight:800;font-size:13px}

.studio-shell{display:grid;gap:16px}
@media(min-width:900px){.studio-shell{grid-template-columns:1.1fr .9fr}}
.studio-box{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:var(--shadow)}
.upload-zone{border:1.5px dashed rgba(168,85,247,.45);border-radius:22px;padding:18px;background:rgba(0,0,0,.2);min-height:220px}
.upload-empty{text-align:center;padding:20px 10px}
.upload-empty.drag{border-color:var(--neon);background:rgba(168,85,247,.08)}
.face-guide{width:110px;height:140px;margin:0 auto 14px;border:2px dashed rgba(255,255,255,.35);border-radius:55% 55% 45% 45%;position:relative}
.face-guide:after{content:"";position:absolute;inset:18% 22%;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.plot-box{margin-top:14px}
.plot-box label{display:block;font-weight:800;margin-bottom:8px}
.plot-box textarea{width:100%;min-height:90px;resize:vertical;border-radius:16px;border:1px solid var(--line);background:#0f081c;color:var(--text);padding:12px;font:inherit}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips button{border:1px solid var(--line);background:rgba(168,85,247,.1);color:var(--text);border-radius:999px;padding:8px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.chips button.on{background:rgba(255,45,85,.2);border-color:rgba(255,45,85,.5)}

.work{display:none}.work.on{display:block}
.work-layout{display:grid;gap:12px}
@media(min-width:600px){.work-layout{grid-template-columns:.7fr 1.3fr}}
#preview{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;background:#2a1848}
.slate{display:grid;gap:8px}
.slate-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid transparent;color:var(--muted);font-size:13px;font-weight:700}
.slate-item .n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#2a1848;color:#fff;font-size:12px}
.slate-item.go{border-color:var(--neon);color:var(--text);background:rgba(168,85,247,.15)}
.slate-item.done{border-color:rgba(52,211,153,.45);color:var(--text);background:rgba(52,211,153,.1)}
.slate-item.done .n{background:var(--ok);color:#062016}
.process-line{margin:12px 0 0;font-weight:700;min-height:1.4em}
.progress-bar{height:8px;border-radius:999px;background:#2a1848;margin-top:12px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--neon),var(--rec));transition:width .4s ease}

.result{display:none;margin-top:16px}.result.on{display:block}
.result-grid{display:grid;gap:16px}
@media(min-width:700px){.result-grid{grid-template-columns:.85fr 1.15fr}}
.preview-phone{margin:0 auto;width:min(260px,100%);aspect-ratio:9/16;border-radius:28px;border:3px solid #3b2460;overflow:hidden;position:relative;background:#1a0f2e;box-shadow:var(--shadow)}
.preview-phone .scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.1);transform:scale(1.08)}
.preview-phone .face-layer{position:absolute;left:12%;right:12%;top:14%;bottom:22%;width:auto;height:auto;object-fit:cover;border-radius:22px;border:2px solid rgba(255,255,255,.25);box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:2}
.preview-phone .badge{position:absolute;left:10px;top:10px;z-index:3;background:var(--rec);color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px}
.preview-phone .play-hit{position:absolute;inset:0;margin:auto;z-index:4;width:58px;height:58px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--rec);font-size:22px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.preview-phone.playing .play-hit{opacity:0;pointer-events:none}
.preview-phone.playing .scene-bg{animation:ken 4s ease-in-out infinite alternate}
.preview-phone.playing .face-layer{animation:floaty 3.2s ease-in-out infinite alternate}
.phone-cap{position:absolute;left:10px;right:10px;bottom:12px;z-index:3;margin:0;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.55);font-size:12px;font-weight:700;line-height:1.35}
@keyframes ken{from{transform:scale(1.05)}to{transform:scale(1.14)}}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.studio-box.hidden{display:none}
@media(min-width:900px){.studio-shell.result-mode{grid-template-columns:1fr}}
.where h3{margin:0 0 8px}.where p{color:var(--muted);font-size:14px;margin:0 0 10px}
.where ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.where li{padding:10px 12px;border-radius:14px;background:rgba(168,85,247,.12);border:1px solid var(--line);font-weight:800;font-size:13px}
.alt-ideas{display:grid;gap:8px;margin-top:12px}
.alt-ideas .idea{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:14px}

.watch-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:18px}
.watch-modal.on{display:flex}
.watch-sheet{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:14px;position:relative;box-shadow:var(--shadow)}
.watch-x{position:absolute;right:10px;top:8px;border:0;background:transparent;color:var(--text);font-size:28px;cursor:pointer;line-height:1}
.watch-stage{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#12081f;margin-top:18px}
.watch-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#watch-bg{filter:brightness(.5) saturate(1.15);animation:ken 4s ease-in-out infinite alternate}
#watch-img{left:10%;right:10%;top:12%;bottom:20%;width:auto;height:auto;border-radius:20px;border:2px solid rgba(255,255,255,.3);animation:floaty 3s ease-in-out infinite alternate}
.watch-rec{position:absolute;left:12px;top:12px;z-index:2;background:var(--rec);color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
.watch-cap{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;margin:0;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.55);font-size:13px;font-weight:700}

.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.g-item{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/14;border:1px solid var(--line)}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-item .p{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--rec);font-weight:800}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800}.faq p{color:var(--muted);margin:8px 0 0;font-size:14px}

.guide-card{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}
.guide-card span{font-family:var(--display);font-weight:800;color:var(--neon2)}.guide-card h3{margin:0 0 4px;font-size:16px}.guide-card p{margin:0;color:var(--muted);font-size:13px}

.footer{padding:36px 0 24px;border-top:1px solid rgba(168,85,247,.2);color:var(--muted);font-size:13px}
.footer a{color:var(--neon2)}.footer .req{margin-top:10px;line-height:1.6}
.btn-nav{background:linear-gradient(90deg,#7C3AED,var(--rec));color:#fff;border-radius:12px;font-size:13px;padding:10px 14px;min-height:42px}
.btn-hero{background:var(--rec);color:#fff;border-radius:8px 22px 8px 22px;font-family:var(--display);font-size:16px;box-shadow:0 12px 28px rgba(255,45,85,.3)}
.btn-mid{background:#fff;color:#2A0A40;border-radius:999px;font-weight:800;padding:14px 22px}
.btn-outline-neon{background:transparent;color:var(--neon2);border:2px solid var(--neon);border-radius:14px;font-family:var(--display)}
.btn-wide-soft{background:rgba(168,85,247,.2);color:#fff;border:1px solid var(--line);border-radius:18px;width:min(100%,360px);font-size:15px}
.mid-cta{display:flex;justify-content:center;margin:22px 0 0}
.chips-label{font-size:13px;font-weight:700;color:var(--muted);margin:10px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:0;max-height:150px;overflow:auto;padding-right:4px}
.photo-thumb{width:88px;height:110px;object-fit:cover;border-radius:16px;margin:0 auto 12px;border:2px solid var(--line);display:none}
.upload-empty.has-photo .photo-thumb{display:block}
.upload-empty.has-photo .face-guide{display:none}

.sticky{position:fixed;z-index:50;display:flex}
.sticky .btn{font-weight:800}
.sticky.v-bar{left:0;right:0;bottom:0;padding:10px 16px calc(10px + var(--safe));background:rgba(11,6,20,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(168,85,247,.25);justify-content:center}
.sticky.v-bar .btn{width:min(420px,100%);border-radius:999px}
.sticky.v-corner-br{right:14px;bottom:calc(14px + var(--safe));left:auto;background:transparent;border:0;padding:0}
.sticky.v-corner-br .btn{border-radius:18px 6px 18px 6px;font-family:var(--display);padding:14px 18px;background:linear-gradient(145deg,var(--neon),var(--rec));box-shadow:0 14px 34px rgba(0,0,0,.45);transform:rotate(-2deg)}
.sticky.v-corner-bl{left:14px;bottom:calc(14px + var(--safe));right:auto;background:transparent;border:0;padding:0}
.sticky.v-corner-bl .btn{border-radius:6px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:#1a0b2e;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.sticky.v-pill-right{right:10px;top:42%;bottom:auto;left:auto;background:transparent;border:0;padding:0;writing-mode:vertical-rl;transform:rotate(180deg)}
.sticky.v-pill-right .btn{border-radius:16px 16px 0 0;padding:16px 12px;background:var(--neon);box-shadow:0 10px 28px rgba(168,85,247,.4);font-size:13px}
.sticky.v-wide-flat{left:0;right:0;bottom:0;padding:0 0 calc(0px + var(--safe));background:transparent;border:0;justify-content:stretch}
.sticky.v-wide-flat .btn{width:100%;border-radius:0;min-height:56px;font-family:var(--display);font-size:18px;background:#FF2D55;box-shadow:none}
body.sticky-v-bar,body.sticky-v-wide-flat{padding-bottom:88px}
body.sticky-v-corner-br,body.sticky-v-corner-bl,body.sticky-v-pill-right{padding-bottom:24px}

.subpage{padding:28px 0 60px}.subpage h1{font-family:var(--display);font-size:32px}.subpage article p{color:var(--muted);max-width:70ch}
.legal-back{display:inline-block;margin-bottom:16px;color:var(--neon2);font-weight:700}