:root{--ink:#14142b;--grape:#5b2a86;--grape2:#7b3fb3;--gold:#ffb703;--mist:#f5f4fb;--line:#e7e5f0;--muted:#5c5b70;--green:#1c7d4d}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
a{color:var(--grape);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-block;background:var(--gold);color:#3a2600;font-weight:900;padding:15px 30px;border-radius:999px;font-size:1.05rem;box-shadow:0 10px 26px rgba(245,158,11,.32)}
nav{background:rgba(20,20,43,.97);position:sticky;top:0;z-index:20}
nav .bar{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{color:#fff;font-weight:900;letter-spacing:1.5px}
.logo .dot{display:inline-block;width:19px;height:19px;vertical-align:-4px;margin-right:1px;font-size:0;color:transparent;background:url(/logo-mark.svg) center/contain no-repeat}
nav .links a{color:#d7cced;font-size:.9rem;margin-left:18px}
nav .links a:hover{color:#fff;text-decoration:none}
header{background:radial-gradient(1000px 460px at 50% -10%,#5b2a86,#2a1350 55%,#14142b);color:#fff;padding:52px 0 44px}
header .crumb{color:#bca9e0;font-size:.82rem;margin-bottom:14px}
header .crumb a{color:#e6d9ff}
header h1{font-size:clamp(1.8rem,4.6vw,2.6rem);font-weight:900;line-height:1.14;max-width:760px}
header p.sub{color:#e6e0f5;font-size:1.08rem;margin-top:14px;max-width:680px}
main{padding:42px 0 20px}
main h2{font-size:clamp(1.3rem,3.2vw,1.75rem);color:var(--grape);margin:32px 0 12px}
main h3{font-size:1.1rem;margin:20px 0 6px}
main p{margin:0 0 14px}
main ul{margin:0 0 16px 22px}main li{margin-bottom:8px}
.demo{background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0}
.demo .lbl{font-weight:800;color:var(--grape);margin-bottom:8px}
.demo audio{width:100%}
.answer{background:linear-gradient(180deg,#faf6ff,#f0e9fb);border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:14px;padding:20px 22px;margin:8px 0 10px;font-size:1.06rem}
.answer b{color:var(--grape)}
.cta{background:linear-gradient(180deg,#2a1350,#14142b);color:#fff;text-align:center;padding:42px 24px;border-radius:18px;margin:34px 0}
.cta h2{color:#fff;margin:0 0 10px}
.cta p{color:#cdbde8;max-width:560px;margin:0 auto 22px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin-bottom:10px;background:#fbfaff}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .a{color:var(--muted);padding:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0}
.card{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fbfaff}
.card h3{margin:0 0 6px}.card p{color:var(--muted);font-size:.95rem;margin:0}
footer{background:#14142b;color:#9a90b5;text-align:center;padding:28px;font-size:.85rem;margin-top:30px}
footer a{color:#cdbde8}