/* Shared Styles */
:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#4b5563;
  --accent:#0ea5a3; /* teal close to your app button */
  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{
  height:100%;
  scroll-padding-top: 64px;
}
body{
  margin:0; font-family: 'Noto Sans TC', 'Sora', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background:var(--bg);
  color:var(--ink);
}
a{color:inherit; text-decoration:none}
.wrap{max-width:960px; margin:0 auto; padding:24px 16px 64px}
header{display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{font-family:'Sora','Noto Sans TC',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; font-size:18px; margin:0; font-weight:700}
nav a{opacity:.85; padding:8px 10px; border-radius:8px}
nav a:hover{background:rgba(0,0,0,.05)}

/* Production-like hero: centered, large headline, logo circle */
.hero-center{display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 0}
.headline{font-family:'Sora','Noto Sans TC',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; font-size: clamp(32px, 6vw, 64px); line-height:1.1; font-weight:800; margin:0 0 36px}
.logo-round{width:140px; height:140px; border-radius:9999px; display:grid; place-items:center; background:#e5e7eb; box-shadow:var(--shadow); margin-bottom:14px}
.appmark{width:100px; height:100px}
.wordmark{font-family:'Sora','Noto Sans TC',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; font-size:34px; font-weight:800; margin:4px 0 4px}
.tag{color:var(--muted); font-size:18px}

/* Badges */
.badges{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; justify-content:center}
.badge{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; box-shadow:var(--shadow)}
.badge svg{width:25px; height:25px}
.badge small{display:block; font-size:11px; line-height:1; color:#6b7280}
.badge span{display:block; font-size:14px; line-height:1}

/* Feature strip (kept simple like production) */
.features{display:grid; gap:14px; grid-template-columns:1fr; margin-top:56px}
.card{background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:18px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

/* Institutions */
.institutions{margin-top:56px; padding:16px 0}
.institutions h2{margin:0 0 8px}
.muted{color:var(--muted)}
.institutions .list{margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.8}
.institutions .cta-link{display:inline-block; margin-top:14px; padding:10px 14px; border-radius:8px; background:#111827; color:#fff; text-decoration:none; box-shadow:var(--shadow)}

footer{margin-top:64px; padding-top:16px; border-top:1px solid #eee; color:#6b7280; font-size:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Mobile dropdown for #navOptions */
.nav-options{display:flex; gap:12px; align-items:center}
.menu-toggle{display:none}

@media (max-width:768px){
  .menu-toggle{
    display:inline-block;
    font-size:1.5rem;
    line-height:1;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
  }
  /* Hide nav by default on mobile; show as dropdown when active */
  .nav-options{
    display:none;
    position:absolute;
    right:0.5rem;
    top:52px; /* roughly header height */
    flex-direction:column;
    gap:0.75rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:1000;
  }
  .nav-options a{white-space:nowrap}
  .nav-options.active{display:flex}
}