/* 爵識科技 品牌色彩系統
   色值以 RGB 三元組儲存，供 Tailwind 的 <alpha-value> 使用。
   定案前可用 ?theme=名稱 或 ?tune=1 切換／微調（見 theme.js）。 */
:root {
  --c-brand: 31 111 178;        /* 主色 科技藍 #1F6FB2 */
  --c-brand-light: 127 169 212; /* 淺藍 #7FA9D4 */
  --c-brand-deep: 20 63 107;    /* 深藍 #143F6B */
  --c-mint: 127 201 165;        /* 薄荷綠 #7FC9A5 */
  --c-ink: 27 36 48;            /* 內文深灰 #1B2430 */
  --c-surface: 244 247 250;     /* 卡片底 #F4F7FA */
  --hero-mode: gradient;        /* gradient | image */
}
html { scroll-behavior: smooth; }
/* 文章目錄錨點：避開固定導覽列 */
article h2[id] { scroll-margin-top: 7rem; }
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.blue-divider { border-bottom: 2px solid rgb(var(--c-brand) / .15); }
.brand-gradient { background: linear-gradient(135deg, rgb(var(--c-brand-deep)) 0%, rgb(var(--c-brand)) 100%); }
.brand-text-gradient { background: linear-gradient(90deg, rgb(var(--c-brand)), rgb(var(--c-mint))); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* hero 兩種模式 */
.hero-gradient-bg { display: block; }
.hero-image-bg { display: none; }
:root[data-hero="image"] .hero-gradient-bg { display: none; }
:root[data-hero="image"] .hero-image-bg { display: block; }
/* 產品下拉 */
.nav-dropdown { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.group:hover .nav-dropdown, .group:focus-within .nav-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
/* 客戶 logo：彩色，hover 微上浮 */
.client-logo { transition: transform .3s ease, box-shadow .3s ease; }
.client-logo img { transition: transform .3s ease; }
.client-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(var(--c-brand) / .15); }
.client-logo:hover img { transform: scale(1.06); }
/* Hero 動態背景 */
@keyframes blob-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(120px,-80px) scale(1.25); } }
@keyframes blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-100px,90px) scale(1.2); } }
@keyframes gradient-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes grid-flow { from { background-position: 0 0; } to { background-position: 48px 48px; } }
@keyframes dash-flow { to { stroke-dashoffset: -400; } }
@keyframes node-pulse { 0%,100% { opacity: .5; r: 4; } 50% { opacity: 1; r: 7; } }
@keyframes phone-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(-3deg); } }
@keyframes phone-float-2 { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; pointer-events: none; }
.hero-gradient-anim { background-size: 200% 200%; animation: gradient-shift 12s ease-in-out infinite alternate; }
.hero-blob-a { width: 520px; height: 520px; right: -140px; top: -160px; background: rgb(var(--c-mint)); animation: blob-a 16s ease-in-out infinite; }
.hero-blob-b { width: 460px; height: 460px; left: -160px; bottom: -120px; background: rgb(var(--c-brand-light)); animation: blob-b 20s ease-in-out infinite; }
.hero-grid { background-image: linear-gradient(rgb(255 255 255 / .13) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .13) 1px, transparent 1px); background-size: 48px 48px; animation: grid-flow 4s linear infinite; }
.hero-line { stroke-dasharray: 12 10; animation: dash-flow 14s linear infinite; }
.hero-node { animation: node-pulse 3s ease-in-out infinite; }
.hero-phone-1 { animation: phone-float 7s ease-in-out infinite; }
.hero-phone-2 { animation: phone-float-2 8s ease-in-out infinite 1s; }
/* Slogan 輪播 */
.slogan-wrap { position: relative; display: grid; }
.slogan-wrap > span { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.slogan-wrap > span.is-active { opacity: 1; transform: none; }
.slogan-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .35); border: 0; padding: 0; cursor: pointer; transition: background .3s, width .3s; }
.slogan-dots button.is-active { background: rgb(var(--c-mint)); width: 22px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-grid, .hero-line, .hero-node, .hero-phone-1, .hero-phone-2, .hero-gradient-anim { animation: none !important; }
}
/* 調色面板 */
#dw-tune { position: fixed; right: 16px; bottom: 16px; z-index: 9999; font: 13px/1.5 system-ui, sans-serif; color: #1B2430; }
#dw-tune .tune-toggle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(var(--c-brand)); color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .25); cursor: pointer; font-size: 20px; }
#dw-tune .tune-panel { display: none; position: absolute; right: 0; bottom: 54px; width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgb(0 0 0 / .25); padding: 14px 16px; }
#dw-tune.open .tune-panel { display: block; }
#dw-tune label { display: block; margin-top: 8px; font-weight: 600; }
#dw-tune input[type=range], #dw-tune select { width: 100%; }
#dw-tune .swatches { display: flex; gap: 6px; margin-top: 8px; }
#dw-tune .swatches span { flex: 1; height: 22px; border-radius: 4px; border: 1px solid rgb(0 0 0 / .1); }
#dw-tune .btns { display: flex; gap: 6px; margin-top: 12px; }
#dw-tune .btns button { flex: 1; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; cursor: pointer; }
#dw-tune textarea { width: 100%; height: 70px; margin-top: 8px; font: 11px/1.4 monospace; }