/* ============================================================
   Devcrew.dev — 接案服務網站
   Global tokens + interactive states + RWD.
   The page structure keeps the design's inline styles for
   pixel fidelity; this file adds what the prototype expressed
   through x-dc (style-focus / style-hover) plus responsive rules.
   Accent (`--accent`) resolves the design prop default #111111.
   ============================================================ */

:root { --accent: #111111; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fbfaf8;
  color: #111111;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
::selection { background: #111; color: #fbfaf8; }
input, select, textarea, button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

@keyframes floatUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Interactive states (ported from design style-focus/style-hover) ---------- */
.field { transition: border-color .15s ease, background-color .15s ease; }
.field:focus { border-color: #161616 !important; background: #fff !important; }
.field.is-invalid { border-color: #c0392b !important; background: #fff !important; }
.submit-btn { transition: opacity .15s ease; }
.submit-btn:hover { opacity: .88; }
.nav-link { transition: color .15s ease; }
.nav-link:hover { color: #111; }

/* ---------- Services carousel ---------- */
.svc-carousel { position: relative; }
.svc-viewport { overflow: hidden; }
.svc-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); will-change: transform; touch-action: pan-y; }
.svc-track > div { flex: 0 0 100%; min-width: 100%; }
.svc-controls { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 30px 32px 6px; }
.svc-arrow {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid #ddd8ce; background: #fff; color: #111;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.svc-arrow:hover { background: #111; color: #fff; border-color: #111; }
.svc-arrow:disabled { opacity: .3; cursor: default; background: #fff; color: #111; border-color: #ddd8ce; }
.svc-dots { display: flex; align-items: center; gap: 9px; }
.svc-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: #d6d1c6; cursor: pointer; transition: background-color .2s ease, width .2s ease; }
.svc-dot.is-active { background: var(--accent); width: 22px; border-radius: 4px; }

/* ---------- Selected work cards (clickable demos) ---------- */
.work-card { display: block; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .45) !important; border-color: #d8d3c9 !important; }
.work-card img { transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.work-card:hover img { transform: scale(1.05); }
.work-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--accent); font-weight: 600; }
.work-cta span { transition: transform .2s ease; }
.work-card:hover .work-cta span { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-h1 { font-size: 46px !important; }
  .hero-visual { display: none !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .svc-grid > div { order: 0 !important; }
  .work-grid { grid-template-columns: 1fr 1fr !important; }
  .process-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
}

@media (max-width: 640px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .nav-link { display: none !important; }
  .hero-h1 { font-size: 38px !important; }
  .h2-lg { font-size: 32px !important; }
  .work-grid { grid-template-columns: 1fr !important; }
  .process-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .stat-num { font-size: 34px !important; }
  .stats-strip { gap: 12px !important; }
  .svc-controls { gap: 14px !important; padding-top: 22px !important; }
  .svc-arrow { width: 40px !important; height: 40px !important; }

  #services { padding: 48px 20px 20px !important; }
  #services > div { margin-bottom: 12px !important; }
  .svc-grid { padding: 32px 20px !important; gap: 24px !important; }
  .svc-grid h3 { font-size: 22px !important; margin: 0 0 10px !important; }
  .svc-grid p { margin: 0 0 14px !important; }
}