/* 基礎設定 - 亮色主題（白底） */
:root{
  --bg:#ffffff;           /* 白色背景 */
  --beige:#fff7ec;        /* 淡米色點綴 */
  --bg-elev:#ffffff;      /* 浮層/面板底色 */
  --panel:#ffffff;        /* 卡片底色 */
  --line:#e6e8eb;         /* 邊界/分隔線 */
  --muted:#6b7077;        /* 次要文字 */
  --text:#1c1f24;         /* 主文字（深灰） */
  --text-dark:#2b2f35;    /* 更深的標題文字 */
  
  /* 金色系（來自 logo 的 M） */
  --gold:#d4af37;         /* 基礎金色 */
  --gold-light:#e8c547;   /* 亮金色 */
  --gold-dark:#b8941f;    /* 深金色 */
  --gold-gradient:linear-gradient(135deg, #f4d03f 0%, #d4af37 50%, #b8941f 100%);
  --gold-glow:rgba(212, 175, 55, 0.3);
  
  /* 品牌色 */
  --brand-gold:var(--gold);
  --brand-text:var(--text-dark);
  
  /* 按鈕 */
  --primary:var(--gold-gradient);
  --primary-ink:#0f0f10;
  --primary-hover:linear-gradient(135deg, #f8d84f 0%, #e0c047 50%, #c8a42f 100%);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Noto Sans TC', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--beige) 100%);
  line-height:1.6;
}

.container{ width:min(1200px, 92%); margin-inline:auto; }
.center{ text-align:center; }
.mt-24{ margin-top:24px; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); box-shadow:0 2px 16px rgba(0,0,0,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.04em; color:var(--text); text-decoration:none; }
.brand-logo{ height:64px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; }
.brand-text .en{ font-size:14px; color:var(--text-dark); font-weight:600; letter-spacing:0.1em; }
.brand-text .zh{ font-size:16px; color:var(--text-dark); font-weight:700; }
.brand:has(.brand-logo[style*="display: none"]) .brand-text{ display:flex !important; }

.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; align-items:center; }
.site-nav a{ color:var(--text); text-decoration:none; padding:8px 12px; border-radius:8px; display:inline-block; }
.site-nav a:hover{ background:rgba(0,0,0,.04); color:var(--gold-dark); }
.site-nav a.active{ background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.3); color:var(--gold-dark); }
.site-nav .btn{ margin-left:8px; }

.nav-toggle{ display:none; background:var(--panel); color:var(--text); border:1px solid var(--line); padding:8px 12px; border-radius:8px; }

/* Hero */
.hero{ position:relative; padding:96px 0 72px; }
.hero-inner{ text-align:center; }
.hero-logo{ height:clamp(140px, 28vw, 320px); width:auto; margin:0 auto 20px; display:block; filter:drop-shadow(0 10px 24px rgba(212,175,55,.45)); }
.hero h1{ font-size:clamp(28px, 4.5vw, 44px); line-height:1.2; margin:0 0 12px; letter-spacing:.02em; }
.hero h1 span{ background:var(--gold-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.lead{ color:var(--muted); margin:0 0 24px; font-size:18px; }
.hero-cta{ display:flex; gap:12px; justify-content:center; }
.hero-bg{ position:absolute; inset:0; background:
  radial-gradient(900px 320px at 50% 10%, rgba(255, 214, 150, .16), transparent 70%),
  linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,.03)); pointer-events:none; }

/* Sections */
.section{ padding:64px 0; }
.section-title{ font-size:28px; margin:0 0 24px; letter-spacing:.02em; position:relative; color:var(--text-dark); }
.section-title::after{ content:''; position:absolute; bottom:-8px; left:0; width:60px; height:3px; background:var(--gold-gradient); border-radius:2px; }
.center .section-title::after{ left:50%; transform:translateX(-50%); }

.grid{ display:grid; gap:16px; }
.features-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.services-grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }

.card, .service-item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.card::before, .service-item::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.card:hover::before, .service-item:hover::before{
  transform: scaleX(1);
}
.card:hover, .service-item:hover{
  border-color:rgba(212, 175, 55, 0.4);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.12), 0 0 24px var(--gold-glow);
}
.card h3, .service-item h3{ margin:0 0 12px; font-size:18px; color:var(--text-dark); }
.muted{ color:var(--muted); }

/* Audiences */
.audiences{ position:relative; overflow:hidden; }
.tech-bg{ position:absolute; inset:0; background:
  radial-gradient(900px 400px at 20% 10%, rgba(255, 214, 150, .12), transparent 70%),
  radial-gradient(900px 400px at 80% 0%, rgba(255, 214, 150, .08), transparent 70%);
  pointer-events:none;
}
.audiences-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.aud-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.aud-card::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; background:conic-gradient(from 180deg, transparent, rgba(212,175,55,.25), transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.aud-card:hover{ transform:translateY(-4px); border-color:rgba(212,175,55,.45); box-shadow:0 12px 26px rgba(0,0,0,.12), 0 0 24px var(--gold-glow); }
.aud-card h3{ margin:6px 0 8px; font-size:18px; color:var(--text-dark); }
.aud-icon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--gold); background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.25); box-shadow:inset 0 0 18px rgba(212,175,55,.08); }
.ticks{ list-style:none; padding:0; margin:10px 0 16px; display:grid; gap:6px; }
.ticks li{ position:relative; padding-left:18px; color:#3b3f45; }
.ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:2px; background:var(--gold-gradient); box-shadow:0 0 0 3px rgba(212,175,55,.12); }

/* Buttons */
.btn{ display:inline-block; padding:10px 20px; border-radius:10px; text-decoration:none; transition:all .3s ease; border:1px solid transparent; font-weight:600; }
.btn-primary{ background:var(--gold-gradient); color:var(--primary-ink); box-shadow:0 4px 12px var(--gold-glow); }
.btn-primary:hover{ background:var(--primary-hover); box-shadow:0 6px 16px rgba(212, 175, 55, 0.4); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-ghost:hover{ background:rgba(212, 175, 55, 0.1); border-color:var(--gold-light); color:var(--gold-light); }

/* Footer */
.site-footer{ border-top:1px solid var(--line); margin-top:56px; background:#fdfdfd; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.site-footer a{ color:var(--muted); text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }

/* Forms */
form label{ display:block; margin-bottom:4px; font-size:14px; color:var(--text); }
form input, form select, form textarea{
  width:100%;
  padding:10px 12px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  transition:.2s ease;
}
form input:focus, form select:focus, form textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--panel);
  box-shadow:0 0 0 3px var(--gold-glow);
}
form textarea{ resize:vertical; min-height:100px; }
form button[type="submit"]{ margin-top:8px; }
.form-status{ margin:0 0 4px; color:var(--muted); font-size:14px; }
.form-status.error{ color:#c0392b; }

/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); padding:20px; visibility:hidden; opacity:0; transition:.25s ease; z-index:100; }
.modal.open{ visibility:visible; opacity:1; }
.modal-content{ background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; padding:28px; max-width:360px; width:100%; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.2); }
.modal-content h2{ margin:0 0 12px; font-size:22px; color:var(--text-dark); }
.modal-content p{ margin:0 0 20px; color:var(--muted); }
.modal-actions{ display:flex; justify-content:center; }

/* Responsive */
@media (max-width: 840px){
  .site-nav ul{ display:none; position:absolute; right:4%; top:60px; flex-direction:column; background:var(--bg-elev); padding:12px; border-radius:12px; border:1px solid var(--line); width:min(240px, 92%); }
  .site-nav ul.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; text-align:center; }
  .brand-logo{ height:48px; }
}