*{box-sizing:border-box}
:root{--violet:#7c3aed;--cyan:#06b6d4;--ink:#0b0620}
body{margin:0;font-family:"Segoe UI",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#1a1a2e;background:#070313;line-height:1.6}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 5%;background:rgba(10,5,30,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font-size:24px;font-weight:900;letter-spacing:.5px;background:linear-gradient(90deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav a{margin:0 14px;color:#d6d3e8;text-decoration:none;font-weight:600}
.nav nav a:hover{color:#22d3ee}
.btn{display:inline-block;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;padding:13px 30px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;font-size:16px;font-weight:700;box-shadow:0 8px 24px rgba(124,58,237,.45);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(6,182,212,.5)}
.btn-small{padding:9px 20px;font-size:14px}
.btn-ghost{background:transparent;color:#a78bfa;border:1.5px solid #7c3aed;box-shadow:none}
.hero{position:relative;text-align:center;padding:110px 5% 90px;color:#fff;overflow:hidden;background:radial-gradient(900px 480px at 15% -10%,rgba(124,58,237,.55),transparent 60%),radial-gradient(800px 420px at 85% 0%,rgba(6,182,212,.4),transparent 60%),linear-gradient(180deg,#0d0524,#070313)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.hero h1{position:relative;font-size:56px;line-height:1.12;margin:0 0 20px;font-weight:900;background:linear-gradient(92deg,#fff 20%,#a78bfa 55%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{position:relative;font-size:19px;color:#c9c4e6;max-width:760px;margin:0 auto 30px}
.hero .btn{position:relative}
.note{position:relative;color:#8f89b3;font-size:13px;margin-top:16px}
.badge{display:inline-block;position:relative;padding:6px 16px;border:1px solid rgba(167,139,250,.5);border-radius:999px;color:#c4b5fd;font-size:13px;font-weight:700;letter-spacing:2px;margin-bottom:22px;background:rgba(124,58,237,.15)}
section{padding:64px 5%;max-width:1120px;margin:0 auto}
#tool,#order,section.tool{background:#f6f5fb;border-radius:28px;margin-top:36px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
h2{text-align:center;font-size:32px;font-weight:900}
body>section:not(.hero):not(.tool) h2{color:#fff}
body>section:not(.hero):not(.tool) .card{background:rgba(255,255,255,.05);color:#e7e4f5;border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(6px)}
body>section:not(.hero):not(.tool) .card p{color:#b9b4d6}
body>section:not(.hero):not(.tool) .card.price{background:#fff;color:#1a1a2e}
body>section:not(.hero):not(.tool) .card.price p{color:#444}
.drop{border:2px dashed #7c3aed;border-radius:16px;padding:50px;text-align:center;cursor:pointer;background:#fff}
.drop:hover{background:#f3efff}
.hint{color:#8a87a0;font-size:13px}
.editor{margin-top:24px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.08)}
.hidden{display:none}
.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:16px}
.controls label{font-size:14px;display:flex;align-items:center;gap:8px}
.controls input[type=text],.controls input[type=email],textarea{padding:9px 12px;border:1.5px solid #ddd6fe;border-radius:10px;font:inherit}
canvas{max-width:100%;border-radius:8px;display:block;margin:0 auto}
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;flex-wrap:wrap;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.card{border-radius:18px;padding:26px;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.price{text-align:center}
.price.hot{border:2.5px solid #7c3aed;transform:scale(1.03)}
.amount{font-size:36px;font-weight:900;background:linear-gradient(90deg,#7c3aed,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.amount small{font-size:14px;color:#999;-webkit-text-fill-color:#999}
.faq details{background:rgba(255,255,255,.06);color:#e7e4f5;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:16px 20px;margin-bottom:10px}
.faq details p{color:#b9b4d6}
footer{text-align:center;color:#6f6a94;padding:34px;font-size:13px}
@media(max-width:640px){.hero h1{font-size:34px}.nav nav{display:none}}