/* ════════════════════════════════════════════════════════════
   DA2 Studio — Global Design System
   Style: Industrial Utility · Orange-driven, engineer-facing
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────────── */
:root {
  /* Brand Orange (primary) */
  --orange-900: #CC7A00;
  --orange-800: #FF9500;
  --orange-700: #FFA733;
  --orange-400: #FFC266;
  --orange-300: #FFD08A;
  --orange-100: #FFE8C2;
  --orange-50:  #FFF6E8;

  /* Brand Blue (secondary / info) */
  --blue-900:  #005A9E;
  --blue-700:  #0078D4;
  --blue-500:  #2196E3;
  --blue-50:   #E6F3FC;

  /* Brand Green (success / free) */
  --green-800: #4FAE22;
  --green-300: #7DDB55;
  --green-100: #DFF6D1;
  --green-50:  #F0FBEA;

  /* Neutral */
  --gray-950:  #141414;
  --gray-900:  #222222;
  --gray-700:  #3D3D3D;
  --gray-600:  #5C5C5C;
  --gray-400:  #8C8C8C;
  --gray-200:  #E0E0E0;
  --gray-100:  #F0F0F0;
  --gray-50:   #FAFAFA;

  /* Semantic */
  --color-primary:       var(--orange-800);
  --color-primary-dark:  var(--orange-900);
  --color-primary-light: var(--orange-300);
  --color-accent:        var(--blue-700);
  --color-accent-dark:   var(--blue-900);
  --color-text:          var(--gray-900);
  --color-text-2:        var(--gray-600);
  --color-border:        var(--gray-200);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--gray-50);
  --color-surface-orange: var(--orange-50);

  /* Typography */
  --font-zh: 'Noto Sans TC', sans-serif;
  --font-en: 'Montserrat', sans-serif;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 3px rgba(20,20,20,.06);
  --shadow-sm: 0 2px 8px rgba(20,20,20,.08);
  --shadow-md: 0 6px 20px rgba(20,20,20,.10);
  --shadow-lg: 0 16px 48px rgba(20,20,20,.14);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 220ms;

  /* Z-index */
  --z-nav:    100;
  --z-modal:  200;
}

/* ──────────────────────────────────────────────
   RESET
────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #000; }
body {
  font-family: var(--font-zh);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ──────────────────────────────────────────────
   LAYOUT
────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.section { padding: var(--sp-24) 0; }
.section--sm { padding: var(--sp-16) 0; }
.section--alt { background: var(--color-surface-alt); }
.section--orange { background: var(--color-surface-orange); }
.section--dark {
  background: var(--gray-950);
  color: #fff;
}

/* ──────────────────────────────────────────────
   TYPOGRAPHY
────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--sp-3);
}
.eyebrow--light { color: var(--orange-300); }

h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
h4 { font-size: 1rem; font-weight: 700; }

.lead {
  font-size: 1.125rem;
  color: var(--color-text-2);
  line-height: 1.8;
  max-width: 640px;
}
.lead--center { margin: 0 auto; text-align: center; }

.section-header { margin-bottom: var(--sp-12); }
.section-header--center { text-align: center; }
.section-header--center .lead { margin: var(--sp-4) auto 0; }
.section-header .lead { margin-top: var(--sp-4); }

/* ──────────────────────────────────────────────
   NAVIGATION
────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: 68px;
  padding-top: 8px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: box-shadow var(--duration) var(--ease-out);
}
.site-nav.is-scrolled { box-shadow: var(--shadow-md); }
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  letter-spacing: .02em;
}
.site-nav__logo img { height: 32px; width: 32px; }
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.site-nav__link {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--duration) var(--ease-out);
  white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link.is-active {
  background: var(--orange-50);
  color: var(--color-primary);
}
.site-nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.site-nav__toggle { display: none; }

/* ── Dropdown：產品選單 ── */
.site-nav__item { position: relative; list-style: none; }
.site-nav__link--btn {
  background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-zh); font-size: 1rem; font-weight: 500;
  color: var(--gray-700);
  display: flex; align-items: center; gap: 5px;
  transition: all var(--duration) var(--ease-out);
  white-space: nowrap;
}
.site-nav__link--btn:hover,
.site-nav__item.is-open .site-nav__link--btn {
  background: var(--orange-50); color: var(--color-primary);
}
.site-nav__chevron { flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.site-nav__item.is-open .site-nav__chevron { transform: rotate(180deg); }

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  z-index: calc(var(--z-nav) + 10);
}
@media (min-width: 1025px) {
  .site-nav__item.has-dropdown:hover .site-nav__dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
}
.site-nav__item.is-open .site-nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.site-nav__dropdown-link {
  display: block;
  padding: var(--sp-3); border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 500; color: var(--gray-700);
  white-space: nowrap;
  transition: all var(--duration) var(--ease-out);
}
.site-nav__dropdown-link:hover { background: var(--orange-50); color: var(--color-primary); }
.site-nav__dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-2) var(--sp-1);
}

/* ── 產品子頁專用：麵包屑、語言切換（首頁不使用） ── */
.site-nav__crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--gray-400);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: .95rem;
  margin-right: auto;
  padding-left: var(--sp-3);
}
.site-nav__crumb::before { content: "/"; color: var(--gray-200); }
.site-nav__langs {
  display: flex;
  gap: 2px;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: 3px;
}
.site-nav__lang-btn {
  padding: 4px 10px;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-en);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.site-nav__lang-btn:hover { background: var(--orange-50); color: var(--color-primary); }
.site-nav__lang-btn.active { background: var(--color-primary); color: #fff; }
@media (max-width: 1024px) {
  .site-nav__crumb { display: none; }
}

/* ── Mobile menu drawer ── */
.site-nav__mobile {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--ease-out);
}
.site-nav.mobile-open .site-nav__mobile {
  max-height: 85vh; overflow-y: auto;
}
.mobile-menu {
  padding: var(--sp-4) 0 var(--sp-8);
  display: flex; flex-direction: column;
}
.mobile-menu__link {
  padding: var(--sp-3) 0; font-size: 1rem; font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border); display: block;
}
.mobile-menu__group {
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border);
}
.mobile-menu__group-title {
  font-size: 1rem; font-weight: 700; font-family: var(--font-en);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: var(--sp-2);
}
.mobile-menu__sub-link {
  display: block; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); font-size: 1rem; color: var(--gray-700);
  transition: all var(--duration) var(--ease-out);
}
.mobile-menu__sub-link:hover, .mobile-menu__sub-link:active {
  background: var(--orange-50); color: var(--color-primary);
}

/* ──────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-zh);
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  min-height: 48px;
  white-space: nowrap;
  transition: all var(--duration) var(--ease-out);
  text-decoration: none;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--orange-50);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-2);
}
.btn-ghost:hover { color: var(--color-primary); }
.btn-white {
  background: #fff;
  color: var(--color-primary-dark);
}
.btn-white:hover {
  background: var(--orange-50);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-white-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.45);
}
.btn-white-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.8);
}
.btn-sm { padding: 9px 20px; font-size: 1rem; min-height: 40px; }
.btn-lg { padding: 16px 36px; font-size: 1.0625rem; min-height: 56px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ──────────────────────────────────────────────
   TAGS / BADGES
────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-en);
  letter-spacing: .04em;
  white-space: nowrap;
}
.tag-green {
  background: var(--green-50);
  color: var(--green-800);
  border: 1px solid var(--green-100);
}
.tag-blue {
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid #BBDEFB;
}
.tag-dark {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* ──────────────────────────────────────────────
   CARDS
────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: all var(--duration) var(--ease-out);
}
.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.card--muted { opacity: .7; }
.card--muted:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  font-size: 1.5rem;
}
.card__icon--green  { background: var(--green-50); }
.card__icon--blue   { background: var(--blue-50); }
.card__icon--orange { background: var(--orange-50); }
.card__icon--gray   { background: var(--gray-100); }

/* ──────────────────────────────────────────────
   CARDS GRID（子頁通用：功能卡、產品卡）
────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cards-grid, .cards-grid--2 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
   DIVIDER / LINE
────────────────────────────────────────────── */
.line-accent {
  width: 40px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--orange-800), var(--blue-700));
  margin-bottom: var(--sp-6);
}
.line-accent--center { margin-left: auto; margin-right: auto; }

/* ──────────────────────────────────────────────
   PAGE HERO（產品子頁標題區，取代各產品自己的 banner）
────────────────────────────────────────────── */
.page-hero {
  padding: 128px 0 64px;
  background: var(--gray-950);
  color: #fff;
}
.page-hero__crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1rem;
  color: rgba(255,255,255,.45);
  margin-bottom: var(--sp-4);
}
.page-hero__crumb a { color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--duration); }
.page-hero__crumb a:hover { color: #fff; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.72); margin-top: var(--sp-4); max-width: 640px; }
.page-hero__ctas { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); flex-wrap: wrap; }
@media (max-width: 640px) {
  .page-hero { padding: 112px 0 48px; }
  .page-hero__ctas { flex-direction: column; align-items: stretch; }
}

/* ──────────────────────────────────────────────
   SCREENSHOT GALLERY（產品截圖）
────────────────────────────────────────────── */
.shot-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.shot-gallery__item {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.shot-gallery__item img { width: 100%; display: block; }
.shot-gallery__cap {
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem;
  color: var(--color-text-2);
  border-top: 1px solid var(--color-border);
}
.shot-gallery--single { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (max-width: 1024px) {
  .shot-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .shot-gallery { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
   CTA BAND
────────────────────────────────────────────── */
.cta-band {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  padding: var(--sp-24) 0;
  text-align: center;
}
.cta-band h2 { color: var(--color-text); margin-bottom: var(--sp-4); }
.cta-band .lead { color: var(--color-text-2); margin: 0 auto var(--sp-8); }
.cta-band__actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.site-footer {
  background: var(--gray-950);
  color: rgba(255,255,255,.85);
  padding: var(--sp-10) 0 var(--sp-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,.18);
  margin-bottom: var(--sp-5);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.site-footer__logo { height: 32px; width: 32px; }
.site-footer__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
}
.site-footer__about {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  max-width: 320px;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  color: rgba(255,255,255,.7);
  transition: color var(--duration);
}
.site-footer__social:hover { color: var(--orange-300); }
.site-footer__col-title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: var(--sp-3);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__link {
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  transition: color var(--duration);
}
.site-footer__link:hover { color: #fff; }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.site-footer__copy {
  font-size: 1rem;
  color: rgba(255,255,255,.5);
}

/* ──────────────────────────────────────────────
   ICON SIZES
────────────────────────────────────────────── */
.icon    { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.icon-lg { width: 24px; height: 24px; flex-shrink: 0; }
.icon-xl { width: 32px; height: 32px; flex-shrink: 0; }

/* ──────────────────────────────────────────────
   UTILITY
────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-muted  { color: var(--color-text-2); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.gap-row { display: flex; flex-direction: row; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ──────────────────────────────────────────────
   RESPONSIVE
   斷點：手機 ≤640px／平板 641–1024px／桌機 ≥1025px
────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-nav__menu { display: none; }
  .site-nav__mobile { display: block; }
  .site-nav__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--r-md); border: 1.5px solid var(--color-border);
    background: transparent; color: var(--gray-700); cursor: pointer;
  }
  .site-nav__toggle svg.icon-close { display: none; }
  .site-nav.mobile-open .site-nav__toggle svg.icon-open { display: none; }
  .site-nav.mobile-open .site-nav__toggle svg.icon-close { display: block; }
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer__grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
}
@media (min-width: 1025px) {
  .site-nav__mobile { display: none !important; }
}
@media (max-width: 640px) {
  .section { padding: var(--sp-16) 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div:not(:first-child) { display: none; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
}