/* Theme & Base */
:root{
  --accent:#0b5f8a; --accent-dark:#084766; --muted:#666; --bg:#f7f8fa; --card:#fff;
  --maxw:1100px; --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.08);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",Arial,"Noto Sans","Noto Sans HK",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#222;line-height:1.6}

/* Layout */
.wrap{max-width:var(--maxw);margin:28px auto;padding:0 18px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:120px;height:auto;display:block;border-radius:4px;box-shadow:none;object-fit:contain}
h1,h2,h3,h4{margin-top:0}

/* Navigation */
nav a{margin-left:14px;color:var(--accent);text-decoration:none;font-weight:600}
nav a.active{text-decoration:underline;color:var(--accent-dark)}
.lang-switch{font-size:.9rem;color:var(--muted)}
.lang-switch a{color:var(--accent);text-decoration:none;font-weight:600}
.lang-switch a:hover{text-decoration:underline}

/* Hero */
.hero{background:linear-gradient(90deg,rgba(11,95,138,.08),rgba(11,95,138,.02));padding:28px;border-radius:var(--radius);margin-top:18px;display:flex;gap:20px;flex-wrap:wrap}
.hero .left{flex:1;min-width:260px}
.hero h1{margin:0;color:var(--accent);font-size:1.8rem}
.hero p{margin:8px 0;color:var(--muted)}
.hero-img{width:100%;max-width:480px;border-radius:var(--radius);box-shadow:var(--shadow);display:block}

/* CTA */
.cta{display:inline-block;margin-top:12px;padding:10px 16px;background:var(--accent);color:#fff;border-radius:var(--radius);text-decoration:none;font-weight:600}
.cta:hover{background:var(--accent-dark)}

/* Sections & Cards */
section{margin-top:26px}
.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.small{font-size:.9rem;color:var(--muted)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.projects-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* Table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:10px;border:1px solid #eee;text-align:left}
th{background:#fafafa;font-weight:600}
tbody tr:nth-child(even){background:#f5f7f9}

/* Form */
form input,form textarea,form button{width:100%;padding:10px;border:1px solid #ddd;border-radius:var(--radius);margin-top:8px;font-size:.95rem}
form textarea{resize:vertical}
form button{background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:600}
form button:hover{background:var(--accent-dark)}

/* Footer */
footer{margin:28px 0;padding:18px;text-align:center;color:var(--muted);font-size:.9rem}

/* RWD */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .projects-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  header{flex-direction:column;align-items:flex-start}
  nav{margin-top:8px}
  nav a{margin-left:0;margin-right:12px}
  .grid{grid-template-columns:1fr}
}