:root { --purple:#5b197a; --purple-dark:#26102f; --gold:#e4ae3a; --gold-soft:#f5dfaa; --ink:#221c25; --muted:#6d6570; --paper:#f8f4ef; --line:#ded5e2; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; line-height:1.75; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:1000; padding:10px 16px; background:#fff; color:var(--purple); border-radius:8px; }
.skip-link:focus { top:16px; }
.site-header { position:sticky; top:0; z-index:50; height:76px; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(91,25,122,.1); backdrop-filter:blur(12px); }
.header-inner { height:100%; display:flex; align-items:center; gap:28px; }
.brand { width:132px; height:50px; flex:0 0 auto; }
.brand img { width:100%; height:100%; object-fit:contain; object-position:left center; }
.site-header nav { display:flex; align-items:center; justify-content:center; gap:25px; flex:1; font-size:14px; font-weight:700; }
.site-header nav a { position:relative; padding:7px 0; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--purple); transition:.25s; }
.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after { right:0; }
.header-cta { padding:10px 18px; color:#fff; background:var(--purple); border-radius:999px; font-size:14px; font-weight:800; }
.hero { position:relative; min-height:720px; display:flex; align-items:center; overflow:hidden; color:#fff; }
.hero-photo,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-photo { object-fit:cover; object-position:center; }
.hero-shade { background:linear-gradient(90deg,rgba(29,10,38,.94) 0%,rgba(43,15,55,.82) 42%,rgba(43,15,55,.2) 78%,rgba(43,15,55,.08)); }
.hero-content { position:relative; z-index:2; padding:100px 0 72px; }
.eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:.18em; font-weight:900; text-transform:uppercase; }
.eyebrow.purple { color:var(--purple); }
.eyebrow.gold { color:var(--gold-soft); }
.hero h1 { max-width:800px; margin:0; font-size:clamp(42px,5.6vw,76px); line-height:1.14; letter-spacing:-.035em; }
.hero h1 span { color:var(--gold-soft); }
.hero-lead { max-width:690px; margin:25px 0 30px; color:rgba(255,255,255,.88); font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:999px; font-weight:900; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--gold); color:#2a1720; box-shadow:0 12px 30px rgba(228,174,58,.25); }
.button.ghost { color:#fff; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.07); }
.status-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.status-row span { padding:8px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(25,7,33,.4); color:rgba(255,255,255,.82); font-size:12px; }
.compliance-banner { background:var(--gold-soft); border-bottom:1px solid #d7bd7f; }
.compliance-banner .shell { display:grid; grid-template-columns:130px 1fr; gap:22px; padding:23px 0; }
.compliance-banner strong { color:var(--purple-dark); }
.compliance-banner p { margin:0; font-size:14px; }
.section { padding:110px 0; }
.section-head { max-width:760px; margin-bottom:44px; }
.section-head.light { color:#fff; }
.section-head h2,.content-stack h2,.legal-grid h2,.sources-inner h2,.cta-inner h2 { margin:0; font-size:clamp(34px,4vw,54px); line-height:1.25; letter-spacing:-.03em; }
.section-head > p:last-child,.content-stack > p,.sources-inner p { color:var(--muted); }
.challenge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.challenge-grid article { min-height:310px; display:flex; flex-direction:column; padding:30px 25px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(150deg,#fff,#fbf8fc); box-shadow:0 18px 40px rgba(64,40,68,.07); }
.challenge-grid article > span { color:var(--purple); font-size:12px; font-weight:900; letter-spacing:.12em; }
.challenge-grid h3 { margin:36px 0 10px; font-size:21px; line-height:1.4; }
.challenge-grid p { margin:0; color:var(--muted); font-size:14px; }
.challenge-grid strong { margin-top:auto; padding-top:22px; color:var(--purple); font-size:13px; }
.location-section,.training { background:var(--paper); }
.split-layout { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; }
.split-layout.reverse { grid-template-columns:.95fr 1.05fr; }
.media-card { margin:0; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 24px 70px rgba(40,22,46,.14); }
.media-card img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.media-card figcaption { padding:14px 18px; color:var(--muted); font-size:13px; }
.content-stack > p { margin:18px 0 22px; }
.check-list { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.check-list li { position:relative; padding-left:28px; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--purple); font-weight:900; }
.solutions { color:#fff; background:radial-gradient(circle at 80% 10%,#6c268e 0,transparent 38%),var(--purple-dark); }
.solution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.solution-grid article { padding:28px; border:1px solid rgba(255,255,255,.15); border-radius:17px; background:rgba(255,255,255,.07); }
.solution-grid article > span { display:inline-block; padding:5px 10px; border-radius:999px; color:var(--gold-soft); background:rgba(228,174,58,.12); font-size:12px; font-weight:900; }
.solution-grid h3 { margin:28px 0 8px; font-size:20px; }
.solution-grid p { margin:0; color:rgba(255,255,255,.68); font-size:14px; }
.fund-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:28px 0; }
.fund-grid div,.training-list div { display:grid; gap:3px; padding:16px; border-radius:12px; background:#f2ecf5; }
.fund-grid strong,.training-list strong { color:var(--purple); }
.fund-grid span,.training-list span { color:var(--muted); font-size:13px; }
.safety-note { padding:20px; border-left:4px solid var(--gold); background:#fff8e8; border-radius:0 12px 12px 0; }
.safety-note p { margin:4px 0 0; color:#5f5341; font-size:14px; }
.roadmap { background:#fff; }
.roadmap-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.roadmap-list li { display:grid; grid-template-columns:58px 1fr; gap:16px; padding:23px; border:1px solid var(--line); border-radius:16px; }
.roadmap-list li > span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--purple); font-weight:900; }
.roadmap-list h3 { margin:0 0 5px; font-size:18px; }
.roadmap-list p { margin:0; color:var(--muted); font-size:14px; }
.training-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.legal-boundary { color:#fff; background:#351143; }
.legal-grid { display:grid; grid-template-columns:1.05fr .95fr .95fr; gap:18px; align-items:stretch; }
.legal-grid > div:first-child { padding-right:30px; }
.legal-grid > div:first-child p:last-child { color:rgba(255,255,255,.72); }
.boundary-card { padding:28px; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:rgba(0,0,0,.13); }
.boundary-card.positive { background:rgba(228,174,58,.1); border-color:rgba(228,174,58,.35); }
.boundary-card h3 { margin:0 0 16px; }
.boundary-card ul { margin:0; padding-left:19px; color:rgba(255,255,255,.76); font-size:14px; }
.official-sources { background:#f5f0f7; }
.sources-inner { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.source-links { display:grid; gap:10px; }
.source-links a { padding:16px 18px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--purple); font-weight:800; }
.source-links a::after { content:" ↗"; }
.cta-section { padding:86px 0; color:#fff; background:linear-gradient(120deg,var(--purple),#7b2b98); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.gold-button { flex:0 0 auto; background:var(--gold); color:#2a1720; }
.site-footer { padding:55px 0; color:#fff; background:#190b20; }
.footer-inner { display:grid; grid-template-columns:360px 1fr auto; align-items:center; gap:40px; }
.footer-brand { display:block; height:56px; }
.footer-brand img { width:100%; height:100%; object-fit:contain; object-position:left center; }
.footer-copy strong { font-size:16px; }
.footer-copy p { margin:2px 0; color:rgba(255,255,255,.7); }
.footer-copy small { display:block; max-width:520px; color:rgba(255,255,255,.48); line-height:1.6; }
.site-footer nav { display:grid; gap:6px; color:rgba(255,255,255,.72); font-size:13px; }
@media (max-width:1050px) { .site-header nav { gap:14px; font-size:12px; } .challenge-grid { grid-template-columns:1fr 1fr; } .legal-grid { grid-template-columns:1fr 1fr; } .legal-grid > div:first-child { grid-column:1/-1; } .footer-inner { grid-template-columns:320px 1fr; } .site-footer nav { grid-column:1/-1; grid-auto-flow:column; justify-content:start; gap:20px; } }
@media (max-width:820px) { .shell { width:min(100% - 32px,680px); } .site-header { height:66px; } .site-header nav { display:none; } .header-inner { justify-content:space-between; } .brand { height:43px; } .hero { min-height:680px; } .hero-shade { background:linear-gradient(90deg,rgba(29,10,38,.92),rgba(43,15,55,.58)); } .section { padding:78px 0; } .split-layout,.split-layout.reverse,.sources-inner { grid-template-columns:1fr; gap:36px; } .cashflow .content-stack { order:2; } .cashflow .media-card { order:1; } .solution-grid { grid-template-columns:1fr 1fr; } .roadmap-list { grid-template-columns:1fr; } .cta-inner { align-items:flex-start; flex-direction:column; } .footer-inner { grid-template-columns:1fr; } .footer-brand { width:min(362px,100%); } }
@media (max-width:560px) { .header-cta { padding:8px 13px; font-size:12px; } .hero { min-height:700px; } .hero-content { padding-top:76px; } .hero-lead { font-size:16px; } .compliance-banner .shell { grid-template-columns:1fr; gap:4px; } .challenge-grid,.solution-grid,.fund-grid,.training-list,.legal-grid { grid-template-columns:1fr; } .challenge-grid article { min-height:260px; } .legal-grid > div:first-child { grid-column:auto; padding-right:0; } .footer-inner { gap:24px; } }