*{box-sizing:border-box}html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:"Noto Sans TC",system-ui,ui-sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#f8fafc;line-height:1.7;overflow-x:hidden}
a{color:#38bdf8;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.section{min-height:100vh;padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
h1,h2{margin:0 0 20px;font-weight:900}
h1{font-size:clamp(32px,5vw,72px);background:linear-gradient(90deg,#22d3ee,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:clamp(26px,3vw,42px);color:#f1f5f9}
.lead{max-width:720px;margin:0 auto 24px;color:#cbd5e1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:800;border:2px solid #22d3ee;color:#22d3ee;background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
.btn.primary{background:linear-gradient(90deg,#22d3ee,#a78bfa);color:#0f172a;border:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1000px;width:100%;margin:20px auto}
.card{padding:20px;border-radius:20px;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.card h3{margin:0 0 10px;color:#fff;font-size:20px}
.card p{margin:0;color:#cbd5e1}
.navbar{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border-radius:999px;padding:8px 20px;display:flex;gap:20px;z-index:50}
.navbar a{color:#f1f5f9;font-weight:700}
.navbar a.active{color:#22d3ee}
.footer{padding:40px 20px;text-align:center;color:#94a3b8}
.media{border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)}