/* WORKS — Site styles, Spotlight (純黑 + 沃克思橘) */

:root {
  --w-ink: #000000;
  --w-ink-2: #0E0E0E;
  --w-ink-3: #1A1A1A;
  --w-paper: #F5F2EC;
  --w-paper-2: #EAE5D8;
  --w-text: #F5F2EC;
  --w-text-soft: rgba(245,242,236,0.78);
  --w-text-mute: rgba(245,242,236,0.5);
  --w-line: rgba(245,242,236,0.14);
  --w-line-soft: rgba(245,242,236,0.06);
  --w-accent: #E05720;          /* 沃克思橘 — 主色 */
  --w-accent-2: #FDA200;        /* 沃克思橘 — 次色 */
  --w-accent-3: #FFB132;        /* 沃克思橘 — 點綴色 */
}

[data-theme="light"] {
  --w-ink: #F5F2EC;
  --w-ink-2: #EAE5D8;
  --w-ink-3: #DCD5C4;
  --w-paper: #000000;
  --w-paper-2: #0E0E0E;
  --w-text: #000000;
  --w-text-soft: rgba(0,0,0,0.78);
  --w-text-mute: rgba(0,0,0,0.55);
  --w-line: rgba(0,0,0,0.16);
  --w-line-soft: rgba(0,0,0,0.06);
  --w-accent: #E05720;
  --w-accent-2: #FDA200;
  --w-accent-3: #FFB132;
}

.w-root {
  background: var(--w-ink);
  color: var(--w-text);
  font-family: "Noto Serif TC", serif;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}

.w-root *::selection { background: var(--w-accent); color: #000000; }

/* Reusable */
.w-serif { font-family: "Noto Serif TC", serif; }
.w-sans  { font-family: "Inter", system-ui, sans-serif; }
.w-mono  { font-family: "JetBrains Mono", ui-monospace, monospace; }
.w-orange { color: var(--w-accent); }
.w-italic { font-style: italic; font-weight: 400; color: var(--w-text-mute); }

.w-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-text-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.w-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--w-accent);
}

.w-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--w-text-mute);
  text-transform: uppercase;
}

.w-section {
  position: relative;
  padding: 120px 64px;
  border-top: 1px solid var(--w-line);
  scroll-margin-top: 80px;
}
.w-section:first-of-type { border-top: none; }

.w-section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--w-line);
  margin-bottom: 64px;
}
.w-section-head h2 {
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  font-size: 88px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}
.w-section-head h2 em {
  font-style: italic;
  color: var(--w-accent);
  font-weight: 500;
}
.w-section-head .right {
  font-family: "Noto Serif TC", serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--w-text-soft);
}

.w-rule { height: 1px; background: var(--w-line); border: 0; margin: 0; }

/* Buttons */
.w-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--w-accent);
  color: #000000;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1.5px solid var(--w-accent);
  cursor: pointer;
  transition: transform .25s, background .25s;
}
.w-btn:hover { transform: translate(-2px, -2px); background: #FF7A3D; box-shadow: 4px 4px 0 #000000; }

.w-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: transparent;
  color: var(--w-text);
  border: 1px solid var(--w-text);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.w-btn-ghost:hover { background: var(--w-accent); color: #000000; border-color: var(--w-accent); }

/* Placeholder */
.w-ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(245,242,236,0.04) 0 8px, rgba(245,242,236,0.01) 8px 16px),
    var(--w-ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.w-ph .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border: 1px solid var(--w-line);
  color: var(--w-text-soft);
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
}
.w-ph::after {
  content: '';
  position: absolute;
  bottom: 12px; left: 12px;
  width: 28px; height: 28px;
  background: var(--w-accent);
  mix-blend-mode: difference;
}

/* Reveal */
.w-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.w-reveal.in { opacity: 1; transform: none; }

/* Marquee */
@keyframes w-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.w-marquee {
  display: flex;
  gap: 64px;
  animation: w-marquee 40s linear infinite;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 768px) & Tablet (≤ 1024px)
   Override inline-styled sections with !important
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .w-section { padding: 80px 32px !important; }
}

@media (max-width: 768px) {
  /* Section padding tighter */
  .w-section { padding: 64px 20px !important; }

  /* Header: hide desktop nav + CTA, show burger */
  .w-header { padding: 14px 20px !important; }
  .w-nav { display: none !important; }
  .w-header-cta { display: none !important; }
  .w-burger { display: flex !important; }
  .w-logo-text { font-size: 15px !important; }
  .w-logo-text small { font-size: 8px !important; letter-spacing: 0.2em !important; }

  /* Section head: 1 column on mobile */
  .w-section-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 32px !important;
    margin-bottom: 40px !important;
  }
  .w-section-head h2 { font-size: 48px !important; line-height: 1.05 !important; }
  .w-section-head .right { font-size: 15px !important; line-height: 1.7 !important; }

  /* Hero h1 */
  .w-hero { padding: 80px 20px 48px !important; min-height: auto !important; }
  .w-hero h1 { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  .w-hero-meta { flex-wrap: wrap !important; gap: 12px !important; font-size: 10px !important; margin-bottom: 32px !important; }
  .w-hero-side { display: none !important; }
  .w-hero-foot {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 32px !important;
  }
  .w-hero-cta { align-items: flex-start !important; }

  /* Marquee shrink */
  .w-marq-lab { padding: 0 20px 16px !important; }
  .w-marq-track { gap: 48px !important; font-size: 32px !important; }
  .w-marq-track .logo { padding: 6px 16px !important; }

  /* About grid 1 col */
  .w-about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .w-about-text h3 { font-size: 32px !important; }
  .w-about-text p { font-size: 15px !important; }
  .w-about-text p::first-letter { font-size: 40px !important; }
  .w-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .w-stat .n { font-size: 40px !important; }

  /* Competencies 1 col on mobile */
  .w-comp-grid { grid-template-columns: 1fr !important; }
  .w-comp { padding: 28px 20px !important; border-right: none !important; }
  .w-comp-zh { font-size: 24px !important; }
  .w-comp-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .w-comp-head h3 { font-size: 32px !important; }

  /* Highlights: 1 col on mobile */
  .w-hl-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 32px !important;
    margin-bottom: 32px !important;
  }
  .w-hl-head h2 { font-size: 48px !important; }
  .w-hl-grid { grid-template-columns: 1fr !important; }
  .w-hl-card { padding: 32px 24px !important; border-right: none !important; }
  .w-hl-zh { font-size: 26px !important; }
  .w-hl-desc { font-size: 14px !important; }

  /* Service tabs wrap */
  .w-svc-tabs { flex-direction: column !important; }
  .w-svc-tab { border-right: none !important; border-bottom: 1px solid var(--w-line) !important; }
  .w-svc-tab strong { font-size: 20px !important; }
  .w-pillar { grid-template-columns: 60px 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
  .w-pillar-zh { font-size: 24px !important; }
  .w-pillar-sub { padding-top: 8px !important; }
  .w-pillar-arrow { display: none !important; }
  .w-seven { grid-template-columns: 1fr !important; }
  .w-svc7 { border-right: none !important; min-height: auto !important; padding: 24px 20px !important; }
  .w-svc7-zh { font-size: 22px !important; }

  /* Cases 1 col on mobile */
  .w-case-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .w-case-tools { flex-direction: column !important; align-items: flex-start !important; }
  .w-case-filters { gap: 6px !important; }
  .w-case-filter { padding: 8px 12px !important; font-size: 10px !important; }
  .w-case-zh { font-size: 18px !important; }

  /* News rows */
  .w-news-row { grid-template-columns: 100px 1fr 40px !important; gap: 16px !important; padding: 20px 0 !important; }
  .w-news-tag { display: none !important; }
  .w-news-zh { font-size: 16px !important; }

  /* Contact grid 1 col */
  .w-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .w-contact-text h3 { font-size: 36px !important; }
  .w-form { padding: 24px !important; }
  .w-form-row { grid-template-columns: 1fr !important; }

  /* Footer */
  .w-foot-top { grid-template-columns: 1fr !important; gap: 32px !important; padding: 0 20px !important; }
  .w-foot-bot { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
}

@media (max-width: 480px) {
  .w-section { padding: 48px 16px !important; }
  .w-hero { padding: 64px 16px 32px !important; }
  .w-hero h1 { font-size: 32px !important; }
  .w-section-head h2 { font-size: 32px !important; }
  .w-hl-head h2 { font-size: 32px !important; }
  .w-marq-track { font-size: 22px !important; }
  .w-stats-row { grid-template-columns: 1fr !important; }
  .w-stat { border-right: none !important; border-bottom: 1px solid var(--w-line) !important; }
  .w-hero-meta { font-size: 9px !important; }
  .w-hero-card-zh { font-size: 18px !important; }
  .w-hl-zh { font-size: 22px !important; }
  .w-case-zh { font-size: 16px !important; }
}