*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e0e0e8;min-height:100vh;line-height:1.7;font-size:17px}
.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 30% 0%,rgba(99,102,241,0.12) 0%,transparent 50%),radial-gradient(ellipse at 70% 100%,rgba(168,85,247,0.08) 0%,transparent 50%);pointer-events:none;z-index:0}
.container{max-width:900px;margin:0 auto;padding:20px;position:relative;z-index:1}
header{text-align:center;padding:60px 20px 40px;border-bottom:1px solid rgba(99,102,241,0.2);margin-bottom:50px}
header .logo{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
header .logo a{text-decoration:none;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
header p{color:#8888a0;font-size:1.1rem}
nav{margin-top:20px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
nav a{color:#8888a0;text-decoration:none;font-size:0.9rem;transition:color 0.2s}
nav a:hover{color:#a855f7}
h1{font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:20px;line-height:1.3}
h2{font-size:1.5rem;font-weight:600;color:#a855f7;margin:40px 0 16px}
h3{font-size:1.15rem;color:#6366f1;margin:25px 0 10px}
p{margin-bottom:16px;color:#b0b0c0}
a{color:#a855f7;text-decoration:none}
a:hover{color:#c084fc}
ul,ol{margin:0 0 18px 24px;color:#b0b0c0}
li{margin-bottom:8px}
.hero{text-align:center;padding:40px 0 60px}
.hero h1{font-size:2.8rem;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.2rem;color:#8888a0;max-width:600px;margin:0 auto 30px}
.cta-btn{display:inline-block;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;padding:14px 36px;border-radius:10px;text-decoration:none;font-weight:600;font-size:1rem;transition:all 0.3s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,0.3)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:30px 0}
.card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:28px;transition:border-color 0.3s}
.card:hover{border-color:rgba(168,85,247,0.4)}
.card h3{margin-top:0;color:#fff}
.card p{color:#8888a0;font-size:0.95rem}
.feature-list{list-style:none;margin-left:0;padding:0}
.feature-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:12px}
.feature-list li::before{content:'✓';color:#a855f7;font-weight:bold;font-size:1.2rem}
footer{text-align:center;padding:50px 20px;margin-top:60px;border-top:1px solid rgba(255,255,255,0.06);color:#555;font-size:0.85rem}
footer a{color:#555;text-decoration:none;margin:0 10px}
footer a:hover{color:#a855f7}
.article-content{max-width:760px;margin:0 auto}
.breadcrumb{font-size:0.85rem;color:#555;margin-bottom:20px}
.breadcrumb a{color:#555}
@media(max-width:600px){h1{font-size:1.6rem}.hero h1{font-size:2rem}.container{padding:15px}header{padding:30px 15px 20px}nav{gap:12px}}