* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #06070f; color: #e6e9f5; overflow-x: hidden; min-height: 100vh; }
#bg-canvas { position: fixed; top: 0; left: 0; z-index: 0; display: block; }
.container { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 50px 20px 80px; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 30px; }
.brand { font-size: 1.4rem; font-weight: 900; background: linear-gradient(135deg,#667eea,#f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav a { color: #aab2d5; text-decoration: none; margin-left: 22px; font-size: .92rem; }
.nav a:hover { color: #fff; }
.hero { text-align: center; padding: 50px 0 30px; }
.hero h1 { font-size: 3.2rem; font-weight: 900; line-height: 1.15; background: linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; }
.hero p { font-size: 1.15rem; color: #9aa3c7; margin: 20px auto; max-width: 680px; line-height: 1.7; }
.cta { margin: 30px 0; }
.cta a { display: inline-block; padding: 14px 38px; background: linear-gradient(135deg,#3b82f6,#8b5cf6); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 28px rgba(59,130,246,.4); transition: transform .2s; }
.cta a:hover { transform: translateY(-3px); }
.section { margin: 70px 0; }
.section h2 { font-size: 1.8rem; color: #ccd6f6; margin-bottom: 8px; }
.section .sub { color: #6b7396; margin-bottom: 28px; font-size: .95rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 26px; backdrop-filter: blur(10px); transition: all .3s; }
.card:hover { transform: translateY(-4px); border-color: rgba(102,126,234,.4); box-shadow: 0 8px 32px rgba(102,126,234,.15); }
.card h3 { color: #e6e9f5; font-size: 1.1rem; margin-bottom: 10px; }
.card p { color: #9aa3c7; font-size: .9rem; line-height: 1.6; }
.tag { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; background: rgba(102,126,234,.15); color: #aab6ff; border-radius: 6px; font-size: .78rem; }
.path { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 24px 20px 20px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: 20px; width: 28px; height: 28px; background: linear-gradient(135deg,#3b82f6,#8b5cf6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.step h4 { color: #ccd6f6; margin: 8px 0 6px; font-size: 1rem; }
.step p { color: #9aa3c7; font-size: .85rem; line-height: 1.5; }
.footer { text-align: center; padding: 40px 0 0; color: #495670; font-size: .85rem; border-top: 1px solid rgba(255,255,255,.05); margin-top: 40px; }
.footer span { color: #667eea; }
@media (max-width: 600px) { .hero h1 { font-size: 2.2rem; } .nav a { margin-left: 12px; font-size: .82rem; } }