/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* ── CSS Variables ── */
:root {
  --navy:          #1A2B45;
  --navy-dark:     #0a1628;
  --navy-mid:      #243a5e;
  --navy-light:    #2e4d7a;
  --accent-line:   #c8d8f0;
  --primary-gold:  #b8953f;
  --gold-light:    #d4b866;
  --gold-pale:     #f5e4a0;
  --text-heading:  #1e293b;
  --text-body:     #334155;
  --text-muted:    #6b7280;
  --border:        #e2e8f0;
  --surface:       #f8f9fa;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.lang-zh { font-family: 'Noto Sans TC', 'Noto Sans', sans-serif; }
main { flex: 1; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ── Layout ── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* ── Animations ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes goldShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes gridDrift {
  from { background-position: 0px 0px; }
  to   { background-position: 72px 72px; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.15); }
}
@keyframes vignetteShift {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.05); }
}
@keyframes bounceTwice {
  0%, 100% { transform: translateY(0); }
  3%        { transform: translateY(-9px); }
  5.5%      { transform: translateY(0); }
  7%        { transform: translateY(-4px); }
  9%        { transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes headingGlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Utility classes ── */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

.hero-glow {
  background: radial-gradient(ellipse 65% 55% at 28% 55%, rgba(184,149,63,0.18) 0%, transparent 70%);
  animation: heroGlow 5s ease-in-out infinite;
}
.cta-glow {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184,149,63,0.12) 0%, transparent 70%);
  animation: vignetteShift 6s ease-in-out infinite;
}
.dark-grid-bg {
  background-image: radial-gradient(circle, rgba(212,184,102,0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: gridDrift 25s linear infinite;
}
.light-grid-bg { position: relative; }
.light-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,184,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 72px 72px;
}
.light-grid-bg > * { position: relative; z-index: 1; }

.scroll-line {
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top;
}
.bounce-periodic { animation: bounceTwice 20s ease-in-out infinite; }

.label-gold {
  background: linear-gradient(90deg, #b8953f 0%, #d4b866 30%, #f5e4a0 50%, #d4b866 70%, #b8953f 100%);
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: goldShimmer 4s linear infinite;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 600;
}

.text-justify { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.5rem; cursor: pointer; border: none; transition: transform 0.2s ease; text-decoration: none; }
.btn:hover { transform: translateY(-2px); }

.btn-navy, a.btn-navy, button.btn-navy { background-color: var(--navy) !important; color: #fff !important; background-image: none; transition: background-color 0.2s, background-image 0.2s, transform 0.2s, color 0.15s; }
.btn-navy:hover, a.btn-navy:hover, button.btn-navy:hover { background-color: transparent !important; background-image: linear-gradient(90deg,#b8953f 0%,#c9a84c 30%,#d4b866 50%,#c9a84c 70%,#b8953f 100%) !important; background-size: 250% auto; animation: goldShimmer 1.5s linear infinite; color: #fff !important; }

.btn-gold { background: linear-gradient(90deg,#b8953f 0%,#d4b866 25%,#f0d898 50%,#d4b866 75%,#b8953f 100%); background-size: 250% auto; animation: goldShimmer 3s linear infinite; color: #fff; transition: filter 0.2s, transform 0.2s; }
.btn-gold:hover { filter: brightness(1.12); animation-duration: 1.5s; }

.btn-outline-white { background: transparent; border: 2px solid #fff; color: #fff; transition: background-image 0.2s, border-color 0.15s, transform 0.2s; }
.btn-outline-white:hover { background-color: transparent; background-image: linear-gradient(90deg,#b8953f 0%,#c9a84c 30%,#d4b866 50%,#c9a84c 70%,#b8953f 100%); background-size: 250% auto; animation: goldShimmer 1.5s linear infinite; border-color: transparent; }

.btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text-body); transition: background-image 0.2s, border-color 0.15s, color 0.15s, transform 0.2s; }
.btn-outline:hover { background-color: transparent; background-image: linear-gradient(90deg,#b8953f 0%,#c9a84c 30%,#d4b866 50%,#c9a84c 70%,#b8953f 100%); background-size: 250% auto; animation: goldShimmer 1.5s linear infinite; color: #fff; border-color: transparent; }

/* ── Header ── */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow 0.3s; }
.site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.site-header .inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; height: 5rem; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .site-header .inner { padding: 0 2rem; } }
.site-logo img { height: 2.5rem; width: auto; }
.site-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.site-nav a { font-size: 0.875rem; color: var(--text-heading); transition: color 0.2s; }
.site-nav a:hover, .site-nav a.active { color: var(--primary-gold); }
.lang-toggle { font-size: 0.875rem; font-weight: 500; border-radius: 9999px; padding: 0.375rem 0.75rem; letter-spacing: 0.05em; cursor: pointer; }
.mobile-menu-btn { display: flex; align-items: center; padding: 0.5rem; color: var(--text-heading); cursor: pointer; background: none; border: none; }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: #fff; }
.mobile-menu.open { display: block; }
.mobile-menu nav { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu nav a { font-size: 0.875rem; color: var(--text-heading); }
.mobile-menu nav a.active { color: var(--primary-gold); }

/* ── Hero ── */
.hero { position: relative; min-height: 75vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,13,26,0.95), rgba(10,22,40,0.75), rgba(10,22,40,0.2)); }
.hero-bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 10rem; background: linear-gradient(to top, rgba(5,13,26,0.5), transparent); }
.hero-content { position: relative; z-index: 10; width: 100%; max-width: 1440px; margin: 0 auto; padding: 7rem 1.5rem 4rem; }
@media (min-width: 768px) { .hero-content { padding: 9rem 2rem 5rem; } }
.hero h1 { font-size: clamp(36px, 5.5vw, 84px); font-weight: 600; color: #fff; line-height: 1.06; margin-bottom: 1.5rem; max-width: 56rem; }
.hero-desc { font-size: 1rem; color: rgba(200,216,240,0.85); margin-bottom: 2.5rem; line-height: 1.7; max-width: 28rem; }
@media (min-width: 768px) { .hero-desc { font-size: 1.125rem; max-width: 32rem; } }
.hero-btns { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .hero-btns { flex-direction: row; gap: 1rem; } }
.hero-scroll { display: none; }
@media (min-width: 768px) {
  .hero-scroll { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10; }
  .hero-scroll span { font-size: 0.5625rem; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 500; }
  .hero-scroll-line { width: 1px; height: 3.5rem; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); }
}

/* ── Marquee ── */
.marquee-section { position: relative; border-bottom: 1px solid var(--border); background: #fff; overflow: hidden; }
.marquee-fade-l { position: absolute; inset-y: 0; left: 0; width: 4rem; z-index: 10; background: linear-gradient(to right, #fff, transparent); pointer-events: none; }
.marquee-fade-r { position: absolute; inset-y: 0; right: 0; width: 4rem; z-index: 10; background: linear-gradient(to left, #fff, transparent); pointer-events: none; }
@media (min-width: 768px) { .marquee-fade-l, .marquee-fade-r { width: 6rem; } }
.marquee-item { display: inline-flex; align-items: center; gap: 0.625rem; padding: 1rem 1.75rem; white-space: nowrap; }
.marquee-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: linear-gradient(135deg, #b8953f, #d4b866); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.marquee-icon svg { width: 0.875rem; height: 0.875rem; color: #fff; }
.marquee-label { font-size: 0.875rem; font-weight: 500; color: var(--text-body); transition: color 0.2s; }
.marquee-item:hover .marquee-label { color: var(--primary-gold); }
.marquee-sep { margin-left: 1rem; width: 1px; height: 1rem; background: var(--border); flex-shrink: 0; }

/* ── Sections ── */
.section { padding: 5rem 0; }
@media (min-width: 768px) { .section { padding: 7rem 0; } }
@media (min-width: 1024px) { .section { padding: 7rem 0; } }
.section-eyebrow { margin-bottom: 1rem; }
@media (min-width: 768px) { .section-eyebrow { margin-bottom: 1.25rem; } }
.section-h2 { font-size: clamp(26px, 3.5vw, 48px); font-weight: 600; color: var(--text-heading); line-height: 1.1; margin-bottom: 1.25rem; }
/* h2 bottom spacing for centered sections: mb-12 mobile (3rem), mb-16 desktop (4rem) */
.section-h2.mb-grid { margin-bottom: 3rem; }
@media (min-width: 768px) { .section-h2.mb-grid { margin-bottom: 4rem; } }
/* h2 bottom spacing for process: mb-16 mobile (4rem), mb-20 desktop (5rem) */
.section-h2.mb-grid-lg { margin-bottom: 4rem; }
@media (min-width: 768px) { .section-h2.mb-grid-lg { margin-bottom: 5rem; } }
.section-h2.center { text-align: center; }
.section-h2.white { color: #fff; }
.section-eyebrow.center, .section-h2.center { text-align: center; }
.heading-hover-gold { cursor: default; transition: all 0.4s ease; }
.heading-hover-gold:hover { background: linear-gradient(90deg,#1e293b 0%,#b8953f 30%,#d4b866 50%,#b8953f 70%,#1e293b 100%); background-size: 250% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: headingGlow 2s ease-in-out infinite; }
.heading-hover-gold-white:hover { background: linear-gradient(90deg,#fff 0%,#d4b866 30%,#f5e4a0 50%,#d4b866 70%,#fff 100%); background-size: 250% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: headingGlow 2s ease-in-out infinite; }

/* ── What We Do ── */
.what-we-do-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .what-we-do-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.what-we-do-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 2rem; }
@media (min-width: 768px) { .what-we-do-desc { font-size: 1.125rem; } }
.caps-list { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cap-badge { padding: 0.375rem 0.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: var(--text-body); }
.image-card { position: relative; aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.image-card img { width: 100%; height: 100%; object-fit: cover; }
.image-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(10,22,40,0.5), transparent); }
.image-card-badge { position: absolute; bottom: 1rem; left: 1rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.75rem; padding: 0.625rem 1rem; color: #fff; }
@media (min-width: 768px) { .image-card-badge { bottom: 1.5rem; left: 1.5rem; padding: 0.75rem 1.25rem; } }
.image-card-badge-label { font-size: 0.625rem; color: var(--gold-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.125rem; }
.image-card-badge-sub { font-size: 0.75rem; font-weight: 500; opacity: 0.8; }

/* ── Services (dark) ── */
.services-dark { background: #050d1a; }
.services-grid { display: grid; grid-template-columns: 1fr; border: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { padding: 2rem; border-top: 1px solid rgba(255,255,255,0.1); transition: background 0.3s; }
@media (min-width: 768px) {
  .service-card:nth-child(-n+2) { border-top: none; }
  .service-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
}
@media (min-width: 1024px) {
  .service-card { border-right: 1px solid rgba(255,255,255,0.1); padding: 2.5rem; }
  .service-card:nth-child(3n) { border-right: none; }
  .service-card:nth-child(-n+3) { border-top: none; }
}
.service-card:hover { background: rgba(255,255,255,0.05); }
.service-icon { width: 2.75rem; height: 2.75rem; border: 1px solid rgba(212,184,102,0.4); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: border-color 0.3s; }
.service-card:hover .service-icon,
.value-dark-card:hover .service-icon,
.svc-overview-card:hover .service-icon { border-color: var(--gold-light); }
.service-icon svg { width: 1.25rem; height: 1.25rem; color: var(--gold-light); }
.service-card h3 { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; }
.service-card p { color: #b0c4d8; line-height: 1.65; font-size: 0.875rem; }

/* ── Products ── */
.products-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .products-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; gap: 0.5rem; }
.product-card:hover { border-color: var(--primary-gold); box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: translateY(-4px); }
.product-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.product-card h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text-heading); }
.product-card .subtitle { font-size: 0.75rem; color: var(--primary-gold); font-weight: 500; margin-top: 0.125rem; }
.product-badge { flex-shrink: 0; font-size: 0.625rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 9999px; padding: 0.25rem 0.625rem; white-space: nowrap; margin-top: 0.125rem; }
.product-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; flex: 1; }

/* ── Process ── */
.process-bg { background: var(--surface); }
.process-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.process-step { position: relative; text-align: center; }
@media (min-width: 1024px) { .process-step { padding: 0 1rem; } }
.process-step-line { display: none; }
@media (min-width: 1024px) {
  .process-step-line { display: block; position: absolute; top: 2.1rem; left: calc(50% + 2.5rem); right: 0; height: 1px; background: linear-gradient(to right, rgba(212,184,102,0.4), rgba(212,184,102,0.1)); }
}
.process-number { font-size: 3.5rem; font-weight: 900; color: rgba(212,184,102,0.15); line-height: 1; margin-bottom: 0.75rem; user-select: none; }
.process-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--gold-light); margin: 0 auto 1rem; }
.process-step h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.5rem; }
.process-step p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; }

/* ── Why Taiwan Teaser ── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (min-width: 768px) { .stats-grid { gap: 1.25rem; } }
.stat-item { border-top: 2px solid var(--gold-light); padding-top: 1rem; }
@media (min-width: 768px) { .stat-item { padding-top: 1.25rem; } }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.25rem; }
@media (min-width: 768px) { .stat-value { font-size: 1.75rem; } }
.stat-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

/* ── CTA Band ── */
.cta-band { position: relative; background: #050d1a; overflow: hidden; }
.cta-band-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.1; }
.cta-band-content { position: relative; z-index: 10; max-width: 1440px; margin: 0 auto; padding: 6rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .cta-band-content { padding: 9rem 2rem; } }
.cta-band h2 { font-size: clamp(28px, 4vw, 64px); font-weight: 600; color: #fff; margin-bottom: 1.25rem; line-height: 1.1; }
.cta-band p { font-size: 1rem; color: rgba(200,216,240,0.8); margin-bottom: 2.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; line-height: 1.7; }
@media (min-width: 768px) { .cta-band p { font-size: 1.25rem; } }
.cta-btns { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .cta-btns { flex-direction: row; gap: 1rem; } }

/* ── Footer ── */
.site-footer { background: #0a1628; color: #fff; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 4rem 1.5rem; }
@media (min-width: 768px) { .footer-inner { padding: 4rem 2rem; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-brand-logo { height: 2.5rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.25rem; }
.footer-tagline { font-size: 0.875rem; color: #b0c4d8; font-weight: 500; margin-bottom: 0.5rem; }
.footer-desc { font-size: 0.875rem; color: #b0c4d8; line-height: 1.65; margin-bottom: 1.25rem; }
.footer-ubn { font-size: 0.75rem; color: #64748b; }
.footer-col h3 { font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.footer-col nav { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col nav a, .footer-col nav span { font-size: 0.875rem; color: #b0c4d8; transition: color 0.2s; }
.footer-col nav a:hover { color: var(--primary-gold); }
.footer-connect a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #b0c4d8; transition: color 0.2s; margin-bottom: 0.625rem; }
.footer-connect a:hover { color: var(--primary-gold); }
.footer-hours-title { font-size: 0.75rem; font-weight: 600; color: #c8d8f0; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.footer-hours-val { font-size: 0.75rem; color: #b0c4d8; line-height: 1.6; }
.footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: #64748b; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a:hover { color: var(--primary-gold); transition: color 0.2s; }

/* ── Floating Contact ── */
.floating-contact { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.floating-btn { background: #fff; display: flex; align-items: center; gap: 0.625rem; border-radius: 9999px; padding: 0.625rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 0.875rem; font-weight: 500; color: var(--text-body); border: 1px solid var(--border); transition: border-color 0.2s, color 0.2s; text-decoration: none; }
.floating-btn:hover { border-color: var(--primary-gold); color: var(--primary-gold); }
.floating-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.floating-toggle { background: linear-gradient(90deg,#b8953f 0%,#d4b866 25%,#f0d898 50%,#d4b866 75%,#b8953f 100%); background-size: 250% auto; animation: goldShimmer 3s linear infinite; width: 3.5rem; height: 3.5rem; border-radius: 9999px; box-shadow: 0 8px 24px rgba(184,149,63,0.45); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.floating-toggle:hover { filter: brightness(1.12); animation-duration: 1.5s; }
.floating-toggle svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.floating-options { display: none; flex-direction: column; gap: 0.75rem; }
.floating-options.open { display: flex; }

/* ── Forms ── */
.form-section { background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-tabs { display: flex; gap: 0.25rem; background: var(--surface); border-radius: 0.75rem; padding: 0.25rem; margin-bottom: 1.5rem; }
.form-tab { flex: 1; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.form-tab.active { background: #fff; color: var(--text-heading); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form-routing { font-size: 0.75rem; color: #9ca3af; margin-bottom: 1.25rem; }
.form-routing span { color: var(--primary-gold); font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-body); margin-bottom: 0.375rem; }
.form-label .req { color: var(--navy); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; color: var(--text-heading); background: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(184,149,63,0.1); }
.form-textarea { resize: none; }
.privacy-check { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.25rem; }
.privacy-check input { margin-top: 0.125rem; width: 1rem; height: 1rem; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.privacy-check label { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; line-height: 1.6; }
.form-submit { width: 100%; margin-top: 0.5rem; padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
.form-success { text-align: center; padding: 1.5rem; color: var(--navy); font-weight: 500; background: #f0f9ff; border-radius: 0.5rem; border: 1px solid #bae6fd; }

/* ── Contact Info ── */
.contact-info-block { display: flex; flex-direction: column; gap: 2rem; }
.contact-info-item { display: flex; gap: 1rem; }
.contact-info-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.contact-info-icon svg { width: 1.125rem; height: 1.125rem; color: var(--primary-gold); }
.contact-info-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.contact-info-val { font-size: 0.9375rem; color: var(--text-heading); font-weight: 500; }
.contact-info-val a { transition: color 0.2s; }
.contact-info-val a:hover { color: var(--primary-gold); }

/* ── Page Hero (inner pages) ── */
.page-hero { background: var(--navy-dark); padding: 5rem 0 4rem; }
.page-hero-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .page-hero-inner { padding: 0 2rem; } }
.page-hero h1 { font-size: clamp(32px, 4vw, 64px); font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: 1rem; }
.page-hero-sub { font-size: 1rem; color: #b0c4d8; max-width: 42rem; line-height: 1.7; }
@media (min-width: 768px) { .page-hero-sub { font-size: 1.125rem; } }

/* ── Generic content sections ── */
.content-section { padding: 5rem 0; }
@media (min-width: 768px) { .content-section { padding: 7rem 0; } }
.two-col { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.prose p { color: var(--text-body); line-height: 1.75; margin-bottom: 1.25rem; font-size: 0.9375rem; }
.prose h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-heading); margin-bottom: 1rem; margin-top: 2rem; }
.prose h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.75rem; margin-top: 1.5rem; }
.value-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .value-cards { grid-template-columns: 1fr 1fr; } }
.value-card { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; }
.value-card h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.5rem; }
.value-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ── Suppliers & Partners ── */
.partners-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .partners-grid { grid-template-columns: 1fr 1fr; } }
.partner-card { background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem 2rem; }
.partner-card h3 { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.5rem; }
.partner-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ── Why Taiwan ── */
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .benefits-grid { grid-template-columns: 1fr 1fr; } }
.benefit-card { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.75rem; }
.benefit-card h3 { font-size: 1rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.75rem; }
.benefit-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

/* ── Privacy / Terms ── */
.legal-content { max-width: 48rem; margin: 0 auto; }
.legal-content h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-heading); margin-top: 2.5rem; margin-bottom: 0.875rem; }
.legal-content p, .legal-content li { font-size: 0.9375rem; color: var(--text-body); line-height: 1.8; margin-bottom: 0.75rem; }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }

/* ── Arrow icon inline ── */
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--primary-gold); transition: gap 0.2s; }
.arrow-link:hover { gap: 0.75rem; }
.arrow-link svg { width: 1rem; height: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────
   INNER PAGE ADDITIONS
   ───────────────────────────────────────────────────────────────────────── */

/* Hero with bg image (inner pages) */
.inner-hero { position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; }
.inner-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inner-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(5,13,26,0.95), rgba(10,22,40,0.8), rgba(10,22,40,0.3)); }
.inner-hero-bottom { position:absolute; bottom:0; left:0; right:0; height:8rem; background:linear-gradient(to top, rgba(5,13,26,0.6), transparent); }
.inner-hero-content { position:relative; z-index:10; width:100%; max-width:1440px; margin:0 auto; padding:6rem 1.5rem 3rem; }
@media(min-width:768px){.inner-hero-content{padding:6rem 2rem 3.5rem;}}
.inner-hero h1 { font-size:clamp(36px,5vw,72px); font-weight:600; color:#fff; line-height:1.12; margin-bottom:1.25rem; max-width:48rem; padding-bottom:0.05em; }
.inner-hero-sub { font-size:1rem; color:rgba(200,216,240,0.85); max-width:32rem; line-height:1.7; }
@media(min-width:768px){.inner-hero-sub{font-size:1.125rem;}}
/* ZH typography: prevent bad line breaks */
.lang-zh .inner-hero h1 { word-break:keep-all; }
.lang-zh .inner-hero-sub { max-width:40rem; word-break:keep-all; }

/* Story / two-column grid (responsive) */
.story-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media(min-width:768px){.story-grid{gap:4rem;}}
@media(min-width:1024px){.story-grid{grid-template-columns:1fr 1fr;gap:4rem;}}

/* Values dark grid */
.values-dark-grid { display:grid; grid-template-columns:1fr; border:1px solid rgba(255,255,255,0.1); }
@media(min-width:768px){.values-dark-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.values-dark-grid{grid-template-columns:repeat(4,1fr);}}
.value-dark-card { padding:2rem; border-top:1px solid rgba(255,255,255,0.1); transition:background 0.3s; display:flex; flex-direction:column; }
@media(min-width:768px){.value-dark-card:nth-child(-n+2){border-top:none;} .value-dark-card:nth-child(odd){border-right:1px solid rgba(255,255,255,0.1);}}
@media(min-width:1024px){.value-dark-card{border-right:1px solid rgba(255,255,255,0.1);padding:2.5rem;} .value-dark-card:nth-child(4n){border-right:none;} .value-dark-card:nth-child(-n+4){border-top:none;} .value-dark-card:nth-child(odd){border-right:1px solid rgba(255,255,255,0.1);}}
.value-dark-card:hover{background:rgba(255,255,255,0.05);}

/* Detailed service card */
.detail-card { background:#fff; border-radius:1rem; padding:2rem; box-shadow:0 1px 4px rgba(0,0,0,0.06); border:1px solid #e2e8f0; margin-bottom:0; }
@media(min-width:768px){.detail-card{padding:2.5rem;}}
.detail-card-header { display:flex; align-items:flex-start; gap:1.25rem; margin-bottom:1.25rem; }
.detail-card-icon { flex-shrink:0; width:3rem; height:3rem; background:linear-gradient(135deg,#b8953f,#d4b866); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; }
.detail-card-icon svg { width:1.5rem; height:1.5rem; color:#fff; }
.detail-card-intro { color:#334155; line-height:1.75; margin-bottom:1.25rem; font-size:0.9375rem; }
.detail-card-what { font-size:0.75rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.75rem; }
.bullet-list { display:flex; flex-direction:column; gap:0.625rem; }
.bullet-item { display:flex; align-items:flex-start; gap:0.75rem; font-size:0.875rem; color:#334155; }
.bullet-dot { width:0.375rem; height:0.375rem; background:#b8953f; border-radius:9999px; margin-top:0.5rem; flex-shrink:0; }

/* Service overview grid (responsive) */
.svc-overview-grid { display:grid; grid-template-columns:1fr; border:1px solid rgba(255,255,255,0.1); }
@media(min-width:640px){.svc-overview-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.svc-overview-grid{grid-template-columns:repeat(3,1fr);}}
.svc-overview-card { display:flex; flex-direction:column; padding:2rem 2rem; border-bottom:1px solid rgba(255,255,255,0.1); text-decoration:none; transition:background 0.3s; }
@media(min-width:1024px){.svc-overview-card{padding:2.5rem;border-bottom:none; border-right:1px solid rgba(255,255,255,0.1);}}
@media(min-width:1024px){.svc-overview-card:nth-child(3n){border-right:none;}}
.svc-overview-card:hover{background:rgba(255,255,255,0.05);}

/* Process grid 5 columns */
.process-grid-5 { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px){.process-grid-5{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.process-grid-5{grid-template-columns:repeat(5,1fr);gap:0.5rem;}}

/* Product dark grid */
.prod-dark-grid { display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,0.1); }
@media(min-width:640px){.prod-dark-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.prod-dark-grid{grid-template-columns:repeat(3,1fr);}}
.prod-dark-card { background:#0d1f3c; padding:1.75rem 2rem; transition:background 0.3s; display:flex; flex-direction:column; }
.prod-dark-card:hover{background:#132848;}
.prod-dark-badge { font-size:0.625rem; font-weight:600; color:#64748b; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:9999px; padding:0.25rem 0.625rem; white-space:nowrap; }
.prod-dark-desc { font-size:0.875rem; color:#b0c4d8; line-height:1.65; margin-top:0.75rem; flex:1; }

/* Alternating image-text product cards */
.alt-card { background:#fff; border-radius:1rem; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); display:grid; grid-template-columns:1fr; }
@media(min-width:768px){.alt-card{grid-template-columns:1fr 1fr;}}
.alt-card-img { position:relative; height:16rem; }
@media(min-width:768px){.alt-card-img{min-height:320px;}}
/* img-right = odd items: image on right (order 2), text on left (order 1) */
@media(min-width:768px){.alt-card.img-right .alt-card-img{order:2;} .alt-card.img-right .alt-card-body{order:1;}}
.alt-card-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,43,69,0.4),transparent); }
.alt-card-num { position:absolute; top:1rem; left:1rem; background:linear-gradient(135deg,#b8953f,#d4b866); border-radius:9999px; width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.875rem; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.alt-card-body { padding:2rem 2.5rem; }
.alt-card-body h3 { font-size:1.5rem; font-weight:600; color:#1e293b; margin-bottom:1rem; }
.alt-card-body .intro { color:#6b7280; line-height:1.75; margin-bottom:1.5rem; font-size:0.875rem; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }

/* Why Taiwan stats */
.why-stats-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){.why-stats-grid{grid-template-columns:repeat(3,1fr);}}
.why-stat-card { background:rgba(255,255,255,0.05); border-left:4px solid #d4b866; border-radius:0.5rem; padding:1.75rem; display:flex; flex-direction:column; }
.why-stat-value { font-size:3rem; font-weight:900; color:#d4b866; line-height:1; }
.why-stat-label { font-size:1rem; color:#c8d8f0; margin-top:0.5rem; flex:1; }
.why-stat-source { font-size:0.75rem; color:#64748b; margin-top:0.25rem; }

/* Benefit cards (why taiwan) */
.benefit-cards { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){.benefit-cards{grid-template-columns:1fr 1fr;}}
.benefit-card-v2 { background:#fff; border:1px solid #e2e8f0; border-radius:0.75rem; padding:1.5rem; display:flex; flex-direction:column; transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.benefit-card-v2:hover { border-color:#b8953f; transform:translateY(-4px); }
.benefit-card-icon { width:3rem; height:3rem; background:linear-gradient(135deg,#b8953f,#d4b866); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.benefit-card-icon svg { width:1.5rem; height:1.5rem; color:#fff; }
.benefit-card-v2 h3 { font-size:1rem; font-weight:600; color:#1e293b; margin-bottom:0.5rem; }
.benefit-card-v2 p { font-size:0.875rem; color:#6b7280; line-height:1.7; flex:1; }

/* Sectors grid (why taiwan) — gap-px creates 1px dividers via bg-white/10 on container */
.sectors-grid { display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,0.1); }
@media(min-width:768px){.sectors-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.sectors-grid{grid-template-columns:repeat(4,1fr);}}

/* Timeline */
.timeline-item { display:flex; gap:1.5rem; }
.timeline-era { flex-shrink:0; width:6rem; padding-top:0.25rem; font-size:1rem; font-weight:700; color:#b8953f; }
.timeline-body { flex:1; padding-left:1.25rem; padding-bottom:2rem; border-left:2px solid #e2e8f0; }
.timeline-body.last { border-left:none; padding-bottom:0; }
.timeline-body h3 { font-size:1.125rem; font-weight:600; color:#1e293b; margin-bottom:0.5rem; }
.timeline-body p { font-size:0.875rem; color:#6b7280; line-height:1.7; }

/* Supply chain corridor grid */
.corridor-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px){.corridor-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.corridor-grid{grid-template-columns:repeat(4,1fr);}}

/* Contact grid (responsive) */
.contact-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media(min-width:1024px){
  .contact-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; }
  .contact-info { grid-column:1; grid-row:1; }
  .contact-form { grid-column:2; grid-row:1/3; }
  .contact-map  { grid-column:1; grid-row:2; display:flex; flex-direction:column; }
}

/* Contact form 2-col field rows */
.form-row2 { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
@media(min-width:480px){.form-row2{grid-template-columns:1fr 1fr;}}

/* Next steps grid */
.next-steps-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){.next-steps-grid{grid-template-columns:repeat(3,1fr);}}

/* Contact next steps (legacy) */
.next-steps { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.next-step { display:flex; gap:1rem; align-items:flex-start; }
.next-step-num { flex-shrink:0; width:1.75rem; height:1.75rem; border-radius:9999px; background:linear-gradient(135deg,#b8953f,#d4b866); color:#fff; font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.next-step p { font-size:0.875rem; color:#334155; line-height:1.65; }

/* ── Cookie Consent Banner ── */
#lb-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #050d1a;
  border-top: 1px solid rgba(184,149,63,0.4);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
#lb-cookie-banner.lb-cookie-show { transform: translateY(0); }
#lb-cookie-banner p {
  color: rgba(200,216,240,0.85);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
#lb-cookie-banner p a {
  color: #d4b866;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lb-cookie-btns {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
#lb-cookie-accept {
  background: linear-gradient(135deg, #b8953f, #d4b866);
  color: #050d1a;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#lb-cookie-accept:hover { opacity: 0.9; }
#lb-cookie-decline {
  background: transparent;
  color: rgba(200,216,240,0.7);
  border: 1px solid rgba(200,216,240,0.3);
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
}
#lb-cookie-decline:hover { border-color: rgba(200,216,240,0.6); color: rgba(200,216,240,0.9); }
@media (max-width: 480px) {
  #lb-cookie-banner { flex-direction: column; align-items: flex-start; }
  .lb-cookie-btns { width: 100%; }
  #lb-cookie-accept, #lb-cookie-decline { flex: 1; text-align: center; }
}

/* ── Footer LinkedIn icon ── */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* ── 404 Page ── */
.notfound-section {
  min-height: calc(100vh - 80px);
  background: linear-gradient(160deg, #050d1a 0%, #0d1f3c 50%, #1a2b45 100%);
  display: flex;
  align-items: center;
  padding: 5rem 0;
}
.notfound-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.notfound-code {
  font-size: clamp(6rem, 20vw, 10rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #b8953f, #d4b866, #f0d898, #d4b866, #b8953f);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s linear infinite;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.notfound-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: #e8f0fc;
  margin-bottom: 1rem;
}
.notfound-desc {
  font-size: 1rem;
  color: rgba(200,216,240,0.75);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.notfound-home-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 3rem;
}
.notfound-links { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; }
.notfound-links-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(200,216,240,0.45);
  margin-bottom: 1rem;
}
.notfound-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.notfound-nav a {
  color: rgba(200,216,240,0.75);
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(200,216,240,0.2);
  border-radius: 9999px;
  transition: border-color 0.2s, color 0.2s;
}
.notfound-nav a:hover { border-color: #d4b866; color: #d4b866; }

/* ── FAQ Page ── */
.faq-wrap { max-width: 860px; margin: 0 auto; }
.faq-category { margin-bottom: 3rem; }
.faq-category-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-gold);
  display: inline-block;
}
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  transition: background 0.2s;
}
.faq-q:hover { background: #f8f9fa; }
.faq-q[aria-expanded="true"] { background: #f8f9fa; color: var(--primary-gold); }
.faq-icon { flex-shrink: 0; color: var(--primary-gold); transition: transform 0.25s; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-a { padding: 0 1.25rem 1.25rem; }
.faq-a p { font-size: 0.9rem; color: #475569; line-height: 1.75; }
.faq-cta {
  text-align: center;
  padding: 3rem 0 1rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 1rem;
}
.faq-cta p { color: #475569; margin-bottom: 1.5rem; }

/* ── Blog Archive ── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }
.blog-card-img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-date { font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-card-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.75rem; line-height: 1.4; }
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: var(--primary-gold); }
.blog-card-excerpt { font-size: 0.875rem; color: #6b7280; line-height: 1.7; flex: 1; margin-bottom: 1rem; }
.blog-card-link { font-size: 0.875rem; font-weight: 600; color: var(--primary-gold); }
.blog-card-link:hover { text-decoration: underline; }
.blog-pagination {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}
.blog-pagination a { font-size: 0.875rem; font-weight: 600; color: var(--primary-gold); }
.blog-empty { color: #94a3b8; text-align: center; padding: 4rem 0; }

/* ── Blog Single ── */
.blog-single-wrap { max-width: 760px; margin: 0 auto; }
.blog-content { font-size: 1rem; line-height: 1.85; color: #334155; }
.blog-content h2 { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 2.5rem 0 1rem; }
.blog-content h3 { font-size: 1.2rem; font-weight: 600; color: #1e293b; margin: 2rem 0 0.75rem; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content img { border-radius: 0.5rem; margin: 1.5rem 0; }
.blog-nav {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}
.blog-nav-link { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; transition: border-color 0.2s; }
.blog-nav-link:hover { border-color: var(--primary-gold); }
.blog-nav-next { text-align: right; }
.blog-nav-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.blog-nav-title { font-size: 0.875rem; font-weight: 600; color: #1e293b; }
.blog-back { margin-top: 1.5rem; }
.blog-back-link { font-size: 0.875rem; color: var(--primary-gold); font-weight: 600; }
.blog-back-link:hover { text-decoration: underline; }