/* 基礎設定 */
:root{
  --brand:#0c8cf0;
  --brand-dark:#0a6fbd;
  --bg:#0b1020;
  --card:#0f1730;
  --text:#e9eef8;
  --muted:#a7b2c8;
  --accent:#22c55e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(12,140,240,.25), transparent 65%),
    radial-gradient(800px 500px at 10% 10%, rgba(34,197,94,.2), transparent 60%),
    var(--bg);
  line-height:1.7;
}

/* 容器與格線 */
.container{width:min(1100px, 92%); margin-inline:auto}
.grid-2{display:grid; grid-template-columns:1.15fr 1fr; gap:32px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(to bottom, rgba(11,16,32,.9), rgba(11,16,32,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{font-weight:900; letter-spacing:.04em; color:white; text-decoration:none}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.btn{display:inline-block; padding:.6rem 1rem; border-radius:10px; background:var(--brand); color:white; text-decoration:none; font-weight:700; border:1px solid rgba(255,255,255,.1)}
.btn:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.2)}
.btn-sm{padding:.45rem .8rem; font-size:.9rem}
.btn-lg{padding:.75rem 1.2rem; font-size:1.05rem; border-radius:12px}
.hamburger{display:none; background:transparent; border:0; width:44px; height:44px; position:relative}
.hamburger span{position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:.2s}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:28px}

@media (max-width:900px){
  .nav{position:fixed; inset:64px 0 auto 0; display:grid; gap:10px; background:rgba(11,16,32,.96); padding:20px; transform:translateY(-120%); transition:.25s}
  .nav.open{transform:translateY(0)}
  .hamburger{display:block}
}

/* Hero */
.hero{padding:90px 0 40px}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center}
.hero-text h1{font-size:clamp(28px, 4vw, 48px); line-height:1.15; margin:0 0 10px}
.hero-text p{color:var(--muted); margin:0 0 18px}
.cta-wrap{display:flex; gap:12px; flex-wrap:wrap}
.video-frame{aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 40px rgba(0,0,0,.25)}
.video-frame iframe{width:100%; height:100%}
.hero-credit{opacity:.7; font-size:.9rem; text-align:center; margin-top:8px}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}}

/* Sections */
.section{padding:72px 0}
.section.alt{background:linear-gradient(to bottom, rgba(255,255,255,.03), transparent 20%)}
h2{font-size:clamp(24px,3vw,32px); margin:0 0 16px}
.list-check{list-style:none; padding:0; margin:12px 0 0}
.list-check li{margin:6px 0; padding-left:28px; position:relative}
.list-check li::before{content:'✓'; position:absolute; left:0; opacity:.7}
.list-dot{list-style:disc; padding-left:18px; color:var(--muted)}
.photo-stack{position:relative}
.photo-stack img{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.12)}
.photo-stack .floating{position:absolute; width:60%; right:-12px; bottom:-12px; box-shadow:0 10px 40px rgba(0,0,0,.35)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px}
.card h3{margin:0 0 6px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* Chips */
.chip-wrap{display:flex; flex-wrap:wrap; gap:10px}
.chip{padding:.45rem .75rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03)}

/* Table */
.table-scroll{overflow:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:640px}
.table th, .table td{padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06)}
.table thead th{position:sticky; top:0; background:rgba(11,16,32,.9)}
.table tr:hover td{background:rgba(255,255,255,.03)}

/* Masonry */
.masonry{columns:3 300px; column-gap:12px}
.masonry img{width:100%; border-radius:12px; margin:0 0 12px; border:1px solid rgba(255,255,255,.1)}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0}
.timeline li{position:relative; padding:12px 0 12px 110px; border-bottom:1px dashed rgba(255,255,255,.08)}
.timeline li span{position:absolute; left:0; top:10px; width:84px; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px}

/* Quotes */
.quote{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; font-style:italic}

/* Accordion */
.accordion details{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin:10px 0}
.accordion summary{cursor:pointer; font-weight:700}

/* Form */
.form{display:grid; gap:12px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px}
.form label{display:grid; gap:8px; font-weight:600}
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); color:var(--text); outline:none
}
input:focus, select:focus, textarea:focus{border-color:var(--brand)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:40px}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; padding:20px 0}
.footer-links a{color:var(--muted); text-decoration:none; margin-right:12px}
.copy{opacity:.6; text-align:center; padding:14px 0; font-size:.9rem}

/* Back to top */
.to-top{
  position:fixed; right:16px; bottom:16px; width:42px; height:42px; border-radius:50%;
  background:var(--brand); color:#fff; border:0; cursor:pointer; display:none; box-shadow:0 10px 30px rgba(0,0,0,.35)
}

/* Utilities */
.section .note{color:var(--muted); font-size:.95rem}