:root{--navy:#273754;--blue:#1b9de0;--teal:#65d7d8;--gold:#f7c957;--ink:#243249;--soft:#eef9fb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
.topbar{position:sticky;top:0;z-index:10;height:72px;display:flex;align-items:center;gap:22px;padding:0 18px;background:rgba(35,38,49,.92);color:#fff}
.brand{display:flex;align-items:center;min-width:132px}
.brand img{width:124px;height:auto}
.nav{display:flex;gap:20px;margin-right:auto;font-weight:700}
.nav a{padding:25px 0;border-bottom:4px solid transparent}
.nav a:hover{border-color:var(--teal)}
.download{align-self:stretch;display:grid;place-items:center;min-width:132px;margin-right:-18px;background:#2f3958;color:#ffe59a;font-size:20px;font-weight:900}
.download span{display:block;color:#fff;font-size:17px}
.hero{position:relative;min-height:690px;overflow:hidden;background:#87dcf5}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,96,146,.62),rgba(23,96,146,.12) 48%,rgba(23,96,146,0) 72%);pointer-events:none}
.hero>picture,.hero>picture>img{width:100%;height:100%;min-height:690px;object-fit:cover}
.hero-copy{position:absolute;z-index:1;left:7vw;top:24%;max-width:500px;color:#fff;text-shadow:0 3px 12px rgba(28,54,84,.35)}
.hero-copy p,.section-title span{margin:0 0 8px;font-weight:900;letter-spacing:.22em;color:#557296}
.hero-copy p{color:#fff}
h1{margin:0;font-size:88px;line-height:1;font-weight:900;color:#fff;letter-spacing:.05em;-webkit-text-stroke:2px #244b78;text-shadow:0 5px 0 #1e7fc0,0 10px 20px rgba(21,67,102,.34)}
.gift-badge{display:inline-block;margin:14px 0 2px;padding:10px 18px;border:2px solid #fff;border-radius:999px;background:linear-gradient(90deg,#ffe27a,#39d8ff);color:#173459;font-size:22px;font-weight:900;text-shadow:none;box-shadow:0 4px 14px rgba(23,66,103,.28)}
.gift-badge strong{color:#0b68c7;font-size:1.18em}
.hero h2{margin:12px 0 28px;font-size:32px;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.actions a{display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:54px;border:2px solid #fff;border-radius:8px;background:#10131a;color:#fff;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.section{padding:84px 8vw}
.section-title{text-align:center;margin-bottom:44px}
.section-title h2{display:inline-block;margin:0;padding:0 32px 8px;border-radius:999px;background:#eaf8fd;color:#2b517a;font-size:52px;line-height:1;font-weight:900}
.section-title.left{text-align:left;margin-bottom:24px}
.news{background:#fff}
.news-list{max-width:920px;margin:auto}
.news-list a{display:grid;grid-template-columns:110px 1fr 70px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #e5e8ed}
.news-list b{display:inline-block;padding:6px 12px;border-radius:6px;background:#69bf65;color:#fff;font-size:14px;text-align:center}
.news-list a:nth-child(2n) b{background:#ff7b86}
.news-list .hot-news{margin-bottom:8px;padding:18px 16px;border:2px solid #5fd7ff;border-radius:8px;background:#f0fbff;font-size:19px;font-weight:900;box-shadow:0 8px 24px rgba(42,137,190,.12)}
.news-list .hot-news b{background:#ff6b76}
.news-list span{text-align:right;color:#567}
.split{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:50px;align-items:center;background:linear-gradient(#fff 0 42%,#f5fbff 42% 100%)}
.split p{font-size:18px;line-height:2}
.split img{border-radius:8px}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.classes article{position:relative;min-height:590px;padding:20px 24px 28px;border:1px solid #dfe6ee;background:linear-gradient(#fff 0 54%,#fff1fa 54% 100%);overflow:hidden}
.classes img{height:390px;margin:auto;object-fit:contain}
.classes h3{margin:8px 0;font-size:30px}
.classes b{color:#2b517a}
.classes p,.feature-card p{line-height:1.8}
.features{background:#fff}
.feature-card{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:34px;max-width:1180px;margin:0 auto 36px;padding:28px;background:#f8fbfd;border-left:10px solid #8ff0ef}
.feature-card.reverse{grid-template-columns:.75fr 1.25fr;border-left:0;border-right:10px solid #ffd5e9}
.feature-card.reverse img{order:2}
.feature-card img{border-radius:6px}
.feature-card h3{font-size:30px;margin:0 0 10px}
.media{background:linear-gradient(#fff,#effbff)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1160px;margin:auto}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.cta{padding:74px 20px;text-align:center;background:#25aee5 url("../images/hero.webp") center/cover;color:#fff}
.cta-gift{display:inline-block;margin:0 0 12px;padding:8px 18px;border-radius:999px;background:#ffe27a;color:#183958;font-weight:900}
.cta h2{margin:0 0 24px;font-size:30px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
footer{display:grid;gap:10px;justify-items:center;padding:28px 20px;background:#24262c;color:#fff;text-align:center}
footer small{padding:10px 16px;border-radius:4px;background:#06080b;color:#fff}
@media (max-width:700px){
  .topbar{height:auto;flex-wrap:wrap;padding:12px 16px;gap:12px}
  .brand{min-width:104px}.brand img{width:104px}.nav{order:3;width:100%;gap:14px;overflow:auto}.nav a{padding:8px 0;white-space:nowrap}.download{margin:0;min-width:132px;font-size:18px;padding:8px}
  .hero:after{background:linear-gradient(180deg,rgba(19,83,130,.38),rgba(19,83,130,.22) 46%,rgba(19,83,130,.68))}
  .hero,.hero>picture,.hero>picture>img{min-height:620px}.hero>picture>img{object-position:58% center}.hero-copy{left:24px;right:24px;top:auto;bottom:54px;max-width:none}h1{font-size:58px}.gift-badge{font-size:17px}.hero h2{font-size:24px}
  .section{padding:64px 22px}.section-title h2{font-size:40px}
  .news-list a{grid-template-columns:84px 1fr;gap:10px}.news-list span{grid-column:2;text-align:left}
  .split,.classes,.feature-card,.feature-card.reverse,.gallery{grid-template-columns:1fr}
  .feature-card.reverse img{order:0}.classes article{min-height:auto}.classes img{height:330px}
}