/* === VARIABLES & RESET === */
:root {
  --navy: #0D1B2A;
  --navy-mid: #1A2D42;
  --navy-light: #2C3E50;
  --gold: #C9A84C;
  --gold-light: #E2C97E;
  --gold-pale: #F5EDD6;
  --bg: #F8F9FB;
  --bg2: #EEF1F5;
  --white: #FFFFFF;
  --text: #2C3E50;
  --text-mid: #4A5568;
  --text-light: #718096;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Noto Sans TC',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

/* === NAV === */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2.5rem;
  background:rgba(248,249,251,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(13,27,42,0.08);
  transition:box-shadow 0.3s;
}
nav.scrolled { box-shadow:0 2px 24px rgba(13,27,42,0.08); }
.nav-logo img { height:30px; display:block; }
.nav-links { display:flex; gap:2.2rem; list-style:none; }
.nav-links a { text-decoration:none; font-size:0.85rem; font-weight:500; color:var(--text-mid); letter-spacing:0.04em; transition:color 0.2s; }
.nav-links a:hover { color:var(--navy); }
.nav-cta {
  background:var(--navy); color:white; border:none;
  padding:0.55rem 1.4rem; border-radius:999px;
  font-family:'Noto Sans TC',sans-serif;
  font-size:0.82rem; font-weight:700; cursor:pointer;
  transition:all 0.2s; text-decoration:none; letter-spacing:0.04em;
}
.nav-cta:hover { background:var(--navy-mid); transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--navy); border-radius:2px; transition:all 0.3s; }
.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0;
  background:var(--white); padding:1.5rem 2rem;
  border-bottom:1px solid rgba(13,27,42,0.08); z-index:99;
  flex-direction:column; gap:1rem;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--text-mid); text-decoration:none; font-weight:500; font-size:1rem; padding:0.5rem 0; border-bottom:1px solid var(--bg2); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-links a.active { color:var(--gold); font-weight:700; }
.lang-switch { display:flex; align-items:center; border:1px solid rgba(13,27,42,0.15); border-radius:999px; overflow:hidden; font-size:0.75rem; font-weight:700; letter-spacing:0.06em; }
.lang-switch a { padding:0.35rem 0.8rem; text-decoration:none; color:var(--text-mid); transition:all 0.2s; }
.lang-switch a.active { background:var(--navy); color:white; }
.lang-switch a:not(.active):hover { background:var(--bg2); }

/* === HERO (shared) === */
#hero {
  min-height:100vh; display:flex; align-items:center;
  padding:8rem 2.5rem 4rem;
  position:relative; overflow:hidden;
  background:var(--navy);
}
.hero-content { position:relative; z-index:1; max-width:720px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid rgba(201,168,76,0.4); color:var(--gold);
  padding:0.35rem 1rem; border-radius:999px;
  font-size:0.78rem; font-weight:500; letter-spacing:0.08em;
  margin-bottom:2rem; animation:fadeUp 0.6s ease both;
}
.hero-badge::before {
  content:''; width:5px; height:5px;
  background:var(--gold); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.5)} }
h1 em { font-style:italic; color:var(--gold); }
.hero-sub {
  font-size:1.02rem; color:rgba(255,255,255,0.6); line-height:1.9;
  margin-bottom:2.75rem; max-width:540px;
  animation:fadeUp 0.6s 0.2s ease both;
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp 0.6s 0.3s ease both; }
.btn-primary {
  background:var(--gold); color:var(--navy);
  padding:0.9rem 2.2rem; border-radius:999px;
  font-weight:700; font-size:0.9rem;
  text-decoration:none; transition:all 0.2s; letter-spacing:0.04em;
  box-shadow:0 4px 24px rgba(201,168,76,0.3);
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-secondary {
  border:1px solid rgba(255,255,255,0.25); color:white;
  padding:0.9rem 2.2rem; border-radius:999px;
  font-weight:500; font-size:0.9rem;
  text-decoration:none; transition:all 0.2s; letter-spacing:0.04em;
}
.btn-secondary:hover { border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.06); }
.hero-stats {
  display:flex; gap:3rem; margin-top:5rem; flex-wrap:wrap;
  animation:fadeUp 0.6s 0.4s ease both;
  padding-top:3rem; border-top:1px solid rgba(255,255,255,0.08);
}
.stat-num { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.2rem; color:var(--gold); line-height:1; }
.stat-label { font-size:0.78rem; color:rgba(255,255,255,0.45); margin-top:0.3rem; letter-spacing:0.04em; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* === SECTIONS === */
section { padding:5.5rem 2.5rem; }
.container { max-width:1020px; margin:0 auto; }
.section-label { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; }
.section-title { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--navy); line-height:1.2; margin-bottom:1rem; }

/* === ABOUT === */
#about { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3.5rem; }
.photo-stack { display:flex; flex-direction:column; gap:0.75rem; }
.photo-main { border-radius:4px; overflow:hidden; aspect-ratio:4/3; position:relative; }
.photo-main img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s; }
.photo-main:hover img { transform:scale(1.03); }
.photo-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.photo-thumb { border-radius:4px; overflow:hidden; aspect-ratio:4/3; position:relative; cursor:pointer; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
.photo-thumb:hover img { transform:scale(1.05); }
.photo-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(13,27,42,0.75)); color:white; font-size:0.7rem; font-weight:500; padding:1.2rem 0.75rem 0.5rem; letter-spacing:0.04em; }
.about-text p { color:var(--text-mid); line-height:1.9; margin-bottom:1rem; font-size:0.96rem; }
.about-highlight { border-left:2px solid var(--gold); padding:0.9rem 1.25rem; margin:1.75rem 0; font-weight:700; color:var(--navy); font-size:0.95rem; background:var(--gold-pale); }
.about-highlight-link { display:block; text-decoration:none; transition:background 0.2s, border-color 0.2s; }
.about-highlight-link:hover { background:var(--gold-light); border-color:var(--gold); color:var(--navy); }
.about-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.5rem; }
.tag { background:var(--bg2); color:var(--text-mid); padding:0.35rem 0.9rem; border-radius:2px; font-size:0.78rem; font-weight:500; letter-spacing:0.04em; }

/* === TRUST / TESTIMONIAL === */
.clients-row { display:flex; flex-wrap:wrap; gap:0.6rem; margin:2rem 0 3rem; }
.client-chip { background:var(--bg); border:1px solid rgba(13,27,42,0.1); color:var(--text-mid); padding:0.45rem 1.1rem; border-radius:2px; font-size:0.82rem; font-weight:500; letter-spacing:0.03em; }
.testimonial-card { background:var(--navy); border-radius:4px; padding:2.5rem; max-width:600px; }
.quote-mark { font-family:'Cormorant Garamond',serif; font-size:4rem; color:var(--gold); line-height:1; margin-bottom:-0.5rem; display:block; opacity:0.6; }
.testimonial-source { font-size:0.78rem; color:rgba(255,255,255,0.4); font-weight:500; letter-spacing:0.06em; }

/* === CONTACT === */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3.5rem; }
.contact-desc { color:var(--text-mid); line-height:1.9; font-size:0.96rem; }
.contact-links { display:flex; flex-direction:column; gap:0.75rem; margin-top:2rem; }
.contact-link { display:flex; align-items:center; gap:0.75rem; color:var(--text-mid); text-decoration:none; font-weight:500; font-size:0.92rem; background:var(--white); padding:0.9rem 1.4rem; border-radius:4px; border:1px solid rgba(13,27,42,0.08); transition:all 0.2s; letter-spacing:0.02em; }
.contact-link:hover { border-color:var(--gold); color:var(--navy); }
.contact-cta-box { background:var(--navy); border-radius:4px; padding:2.75rem; }
.contact-cta-box h3 { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.6rem; color:white; margin-bottom:0.75rem; }
.contact-cta-box p { color:rgba(255,255,255,0.55); font-size:0.9rem; line-height:1.8; margin-bottom:2rem; }
.contact-cta-box a { display:block; text-align:center; background:var(--gold); color:var(--navy); padding:1rem; border-radius:999px; font-weight:700; text-decoration:none; transition:all 0.2s; font-size:0.92rem; letter-spacing:0.04em; }
.contact-cta-box a:hover { background:var(--gold-light); }

/* === FOOTER === */
footer { background:var(--navy); color:rgba(255,255,255,0.3); text-align:center; padding:2rem; font-size:0.78rem; letter-spacing:0.06em; }

/* === IG FLOAT === */
.ig-float { position:fixed; bottom:2rem; right:2rem; z-index:200; }
.ig-float-btn { display:flex; align-items:center; gap:0; background:var(--navy); color:white; text-decoration:none; border-radius:999px; padding:0.7rem 0.8rem; box-shadow:0 4px 20px rgba(13,27,42,0.2); transition:gap 0.3s ease, padding 0.3s ease, background 0.2s, color 0.2s; overflow:hidden; }
.ig-float-btn:hover { gap:0.5rem; padding:0.7rem 1.1rem; background:var(--gold); color:var(--navy); }
.ig-icon { flex-shrink:0; display:block; }
.ig-label { font-size:0.82rem; font-weight:700; white-space:nowrap; max-width:0; overflow:hidden; letter-spacing:0.03em; transition:max-width 0.3s ease; }
.ig-float-btn:hover .ig-label { max-width:120px; }

/* === REVEAL ANIMATION === */
.reveal { opacity:0; transform:translateY(24px); transition:all 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* === RESPONSIVE === */
@media (max-width:768px) {
  nav { padding:1rem 1.25rem; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  #hero { padding:6.5rem 1.25rem 3rem; }
  .hero-stats { gap:2rem; }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  section { padding:3.5rem 1.25rem; }
}