:root{--ink:#3B2A4F;--deep:#3E2E7A;--pur:#5A41B5;--soft:#F4EEFF;--line:#E4DAFB;--gold:#FFE7A3;--gold2:#F7CF5E;--pink:#C455C0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--soft);color:var(--ink);font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;font-size:16px;line-height:1.75;line-break:strict;overflow-wrap:break-word;text-wrap:pretty}
a{color:inherit}
img{max-width:100%;display:block}
.in{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Huninn','Noto Sans TC',sans-serif;font-weight:400;color:var(--deep);line-height:1.3;text-wrap:balance}
.eb{display:block;font-size:12px;font-weight:700;letter-spacing:.28em;color:#9A84D8;text-align:center}
.sec{padding:72px 0}
.sec.alt{background:#E8F1FF}
.sec h2{font-size:34px;margin:6px 0 10px;text-align:center}
.lead{max-width:40em;margin:0 auto 32px;text-align:center;color:#6E5E82}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:2px solid #fff;transition:transform .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-1px);outline:none}
.btn.gold{background:var(--gold);color:var(--deep);box-shadow:0 4px 0 #C99A2E}
.btn.pri{background:var(--pink);color:#fff;border-color:var(--gold);box-shadow:0 4px 0 #8E3393}
.btn.line{background:#06C755;color:#fff;box-shadow:0 4px 0 #04913E}
.card{background:#fff;border:3px solid var(--line);border-radius:26px;box-shadow:0 6px 0 var(--line);padding:26px}
/* hero desktop */
.hero-d{position:relative;container-type:inline-size;width:100%;aspect-ratio:1536/1024;background:url(img/hero-desktop.webp) center/cover no-repeat}
.hero-d a{position:absolute;display:block;text-decoration:none;border-radius:999px}
.hero-d a:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.hero-d .nv{display:flex;flex-direction:column;align-items:center;padding-top:.55cqw;color:#fff;text-shadow:0 .06cqw .25cqw rgba(60,40,140,.5)}
.hero-d .nv b{font-size:1cqw;letter-spacing:.06em;white-space:nowrap}
.hero-d .nv i{font-style:normal;font-size:.5cqw;letter-spacing:.14em;opacity:.85}
.hero-d .nv.on::after{content:"";width:2.4cqw;height:.18cqw;background:#fff;border-radius:2px;margin-top:.3cqw}
.hero-d .isle{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:2.3cqw;transition:transform .25s,box-shadow .25s}
.hero-d .isle b{font-size:1.17cqw;letter-spacing:.08em;color:#4A2E1A;white-space:nowrap;line-height:1.2}
.hero-d .isle i{font-style:normal;font-size:.56cqw;letter-spacing:.14em;color:#8A6A4A}
.hero-d .isle:hover{transform:translateY(-.25cqw);box-shadow:0 0 0 .2cqw rgba(255,255,255,.95),0 0 1.8cqw .5cqw rgba(247,207,94,.8)}
.hero-d a.cta{display:flex;align-items:center;justify-content:center;gap:.55cqw;color:#fff;font-weight:700;font-size:1.12cqw;letter-spacing:.12em;background:linear-gradient(180deg,#6B52C8 0%,#4B3593 100%);border:.14cqw solid rgba(255,231,163,.85);box-shadow:0 0 0 .12cqw rgba(255,255,255,.35),0 .3cqw 1cqw rgba(40,20,110,.45),inset 0 .15cqw .3cqw rgba(255,255,255,.25);transition:transform .2s,box-shadow .2s}
.hero-d a.cta svg{width:1.45cqw;height:1.45cqw}
.hero-d a.cta:hover{transform:translateY(-.15cqw);box-shadow:0 0 0 .12cqw rgba(255,255,255,.5),0 0 1.4cqw .3cqw rgba(247,207,94,.7)}
.hero-d a.bub{display:flex;align-items:center;gap:.8cqw;padding:0 1.4cqw 0 .45cqw;background:linear-gradient(180deg,rgba(98,72,190,.97),rgba(75,53,147,.97));border:.12cqw solid rgba(255,255,255,.55);box-shadow:0 .3cqw 1.2cqw rgba(40,20,110,.4);color:#fff;font-weight:700;font-size:.88cqw;line-height:1.5;letter-spacing:.04em;white-space:nowrap}
.hero-d a.bub img{width:4.9cqw;height:4.9cqw;border-radius:50%;border:.2cqw solid #fff;background:#FFE7A3;flex:0 0 auto;margin-left:-.9cqw;box-shadow:0 .2cqw .6cqw rgba(40,20,110,.35)}
.hero-d a.bub em{font-style:normal;color:#FFE7A3;font-size:1.3cqw;margin-left:auto}
.hero-d a.bub:hover{transform:translateY(-.15cqw)}
.hero-d a.exp{display:flex;align-items:center;justify-content:center;gap:1.4cqw;background:linear-gradient(90deg,#C455C0 0%,#A24FC8 55%,#8C5BD6 100%);border:.16cqw solid rgba(255,236,190,.9);box-shadow:0 0 0 .25cqw rgba(255,214,150,.35),0 0 1.6cqw .4cqw rgba(255,200,120,.55),inset 0 .2cqw .4cqw rgba(255,255,255,.3);color:#fff;transition:transform .2s}
.hero-d a.exp .t{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.hero-d a.exp b{font-size:1.55cqw;letter-spacing:.14em}
.hero-d a.exp i{font-style:normal;font-size:.62cqw;letter-spacing:.2em;opacity:.9;margin-top:.2cqw}
.hero-d a.exp .ch{width:2.1cqw;height:2.1cqw;border-radius:50%;background:rgba(255,255,255,.22);border:.1cqw solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.hero-d a.exp .ch svg{width:1.2cqw;height:1.2cqw}
.hero-d a.exp:hover{transform:translateY(-.15cqw)}
.hero-d a.hb{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.42cqw}
.hero-d a.hb i{display:block;width:2cqw;height:.17cqw;border-radius:2px;background:#fff;box-shadow:0 0 .3cqw rgba(60,40,140,.5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-m{display:none;position:relative}
.hero-m a{position:absolute;display:block}
.mnav{display:none}
@media (max-width:760px){.hero-d{display:none}.hero-m{display:block}.mnav{display:block;background:var(--deep);padding:14px 0}.mnav ul{list-style:none;margin:0;padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mnav a{display:block;text-align:center;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.1)}}
/* courses */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.plan{display:flex;flex-direction:column;gap:10px}
.plan .tg{align-self:flex-start;font-size:13px;font-weight:700;border-radius:999px;padding:3px 12px;background:#EFE7FF;color:var(--pur)}
.plan h3{margin:0;font-size:24px}
.plan ul{margin:0;padding-left:20px;color:#5B4A6E;font-size:15px}
.plan .pr{margin-top:auto;padding-top:12px;border-top:2px dashed var(--line);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .pr b{font-size:34px;color:var(--pur);font-variant-numeric:tabular-nums}
.plan .pr s{color:#9A94AA;font-size:14px}
.plan .pr small{color:#8A5A00;font-weight:700;background:#FFF3C4;border-radius:999px;padding:2px 10px;font-size:12px}
.plan .note{font-size:13px;color:#8A7A9E;margin:0}
.plan.feat{border-color:var(--gold2);box-shadow:0 6px 0 #E8B94A}
.how{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.how p{margin:0;max-width:44em;color:#5B4A6E}
/* about */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.about img{border-radius:26px;border:4px solid #fff;box-shadow:0 10px 30px rgba(60,40,140,.18)}
.vals{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vals span{font-size:14px;font-weight:700;color:var(--pur);background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 14px}
.founder{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;align-items:center;margin-top:48px}
.founder img{width:200px;height:200px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 0 0 3px var(--gold2)}
.founder ul{margin:8px 0 0;padding-left:20px;color:#5B4A6E;font-size:15px;columns:2;column-gap:28px}
/* voices */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.voice b{display:block;font-size:18px;color:var(--deep);margin-bottom:6px}
.voice p{margin:0;color:#5B4A6E;font-size:15px}
.voice small{display:block;margin-top:12px;color:#8A7A9E;font-size:13px}
/* contact */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.contact dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;font-size:16px}
.contact dt{color:#8A7A9E}
.contact dd{margin:0;font-weight:700;color:var(--ink)}
.contact .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
footer{background:var(--deep);color:#CFC3EE;font-size:13px;padding:26px 0 34px}
footer .in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:#CFC3EE}
/* legal */
.top{background:var(--deep);border-bottom:3px solid var(--gold2)}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.top img{height:50px;width:auto}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{color:#E3DAFB;text-decoration:none;font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px}
.top nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.doc{max-width:860px;margin:0 auto 28px}
.doc h2{text-align:left;font-size:28px;margin:0 0 6px}
.doc h3{font-family:inherit;font-weight:700;font-size:18px;margin:22px 0 4px}
.doc p{margin:0;color:#4B3A5F}
.toc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.toc a{font-weight:700;text-decoration:none;color:var(--pur);background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 16px}
@media (max-width:980px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.about{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.sec{padding:52px 0}.sec h2{font-size:27px}.plans,.voices,.contact{grid-template-columns:minmax(0,1fr)}.founder{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.founder ul{columns:1;text-align:left}.card{padding:20px;border-radius:22px}}