/* ============================================================
   v2.00 深空暗夜科技風 — 深色主題覆蓋層
   在 style.css 之後引入；移除本文件 <link> 即恢復原淺色風格。
   色彩規格見 docs/superpowers/specs/2026-09-20-dark-tech-theme-redesign-design.md
   ============================================================ */

/* ---------- 變量重映射：文字/邊框/表面 ---------- */
:root {
  --navy: #19C6DE;          /* 原藏青鏈接/強調 → 霓虹青 */
  --navy-dark: #E8F1FF;     /* 原深色標題文字 → 亮白藍 */
  --navy-light: #3DDCEF;    /* 漸變亮端 → 亮青 */
  --gold: #D99A3E;          /* 品牌金保留（CTA / 關鍵數字） */
  --gold-light: #E8B968;
  --bg: #070B14;            /* 主背景 · 深空 */
  --bg-soft: #0B1220;       /* 表面層 */
  --text: #D7E3F4;
  --text-muted: #8A9BB8;
  --border: rgba(0, 229, 255, .14);
  --shadow: 0 4px 20px rgba(0, 0, 0, .40);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .50);
  --shadow-xl: 0 22px 60px rgba(0, 0, 0, .55);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .40);
  --grad-navy: linear-gradient(135deg, #0B1220 0%, #0E2233 50%, #123B4A 100%);
  --grad-ai: linear-gradient(120deg, #0891B2 0%, #00E5FF 100%);
  --ai-cyan: #00E5FF;
  --ai-cyan-soft: rgba(0, 229, 255, .10);
}

/* ---------- 全局底色 + 低透明度青色網格紋理 ---------- */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 229, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed;
}
::selection { background: rgba(0, 229, 255, .22); }

/* ---------- Header：深色毛玻璃 ---------- */
.site-header {
  background: rgba(7, 11, 20, .82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
.site-header .brand img { filter: none; }
.footer-brand img { filter: none; }
.lang-switch button.on { color: #04222B; }

/* ---------- Hero：深空底 + 霓虹青標題 ---------- */
.hero {
  background: linear-gradient(135deg, #05080F 0%, #070B14 55%, #0A1626 100%);
}
.hero.has-carousel .hero-slides::after {
  background:
    linear-gradient(rgba(0, 229, 255, .04) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(90deg, rgba(0, 229, 255, .04) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(100deg, rgba(5, 8, 15, .94) 0%, rgba(7, 11, 20, .86) 46%, rgba(7, 11, 20, .52) 100%);
}
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.hero h1 em {
  background: linear-gradient(100deg, #B9F6FF 0%, #00E5FF 42%, #8FF0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.sub { color: rgba(215, 227, 244, .85); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-eyebrow {
  background: rgba(0, 229, 255, .08);
  border-color: rgba(0, 229, 255, .30);
  color: #7FEBFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.hero-slide-caption .cap {
  background: rgba(7, 11, 20, .6);
  border-color: rgba(0, 229, 255, .4);
  color: #67E8F9;
}

/* 粒子網絡畫布（JS 動態創建，無 JS 時不存在、內容不受影響） */
.gs-particles {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

/* ---------- 按鈕：金色 CTA 保留，navy 款改為青色描邊 ---------- */
.btn-navy {
  background: rgba(0, 229, 255, .10);
  color: #00E5FF;
  border: 1px solid rgba(0, 229, 255, .42);
}
.btn-navy:hover {
  background: rgba(0, 229, 255, .20);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 229, 255, .18);
}

/* ---------- 數據條：青色漸變數字 ---------- */
.stats-strip { border-bottom: 1px solid var(--border); }
.stat-num {
  background: linear-gradient(120deg, #7DF9FF 0%, #00E5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-num em { -webkit-text-fill-color: var(--gold); background: none; }

/* ---------- 卡片族：深色表面 + 青色描邊 ---------- */
.card, .model-card, .trend-item, .team-card, .job-card,
.service-block, .sb-item, .process-step, .faq-item, .contact-form {
  background: #0E1628;
  border-color: var(--border);
}
.card { box-shadow: var(--shadow-xs); }
.card::before { background: linear-gradient(90deg, #00E5FF, #0E7490); }
.card .icon {
  background: linear-gradient(135deg, #0E7490 0%, #00E5FF 100%);
  box-shadow: 0 8px 20px rgba(0, 229, 255, .18);
}
.card:hover { border-color: rgba(0, 229, 255, .30); }
.card .case-result { color: #7FEBFF; background: rgba(217, 154, 62, .10); }

.sb-item { background: #0B1220; }
.sb-item:hover { border-color: rgba(217, 154, 62, .4); }
.service-block .sb-head .num { color: rgba(0, 229, 255, .12); }

.team-avatar {
  background: linear-gradient(135deg, #0E7490, #00E5FF);
  box-shadow: 0 0 0 4px #0E1628, 0 0 0 5px rgba(0, 229, 255, .35);
}
.team-card:nth-child(2n) .team-avatar {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 0 4px #0E1628, 0 0 0 5px rgba(217, 154, 62, .35);
}

.job-card:hover { border-color: rgba(0, 229, 255, .35); }
.job-meta span { background: #0B1220; }

/* ---------- 模型矩陣 ---------- */
.model-card:hover { border-color: rgba(0, 229, 255, .40); }
.model-card.cn .mc-tag { background: rgba(217, 154, 62, .12); color: var(--gold-light); }
.model-group-head .gh-flag { box-shadow: 0 4px 14px rgba(0, 229, 255, .18); }
.cap-block {
  background: linear-gradient(135deg, rgba(0, 229, 255, .04), rgba(0, 229, 255, .08));
  border-color: rgba(0, 229, 255, .18);
}
.data-note { border-left-color: var(--gold); }

/* ---------- 視覺面板 / 內頁 Hero / CTA / 聯繫卡 ---------- */
.visual-panel {
  background:
    radial-gradient(circle at 78% 18%, rgba(217, 154, 62, .18), transparent 55%),
    linear-gradient(135deg, #0B1220 0%, #0E2233 60%, #123B4A 100%);
}
.page-hero {
  background:
    linear-gradient(rgba(0, 229, 255, .04) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(0, 229, 255, .04) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(120deg, #05080F 0%, #0A1626 100%);
}
.cta-band {
  background:
    radial-gradient(circle at 18% 120%, rgba(217, 154, 62, .22), transparent 55%),
    radial-gradient(circle at 85% -20%, rgba(0, 229, 255, .10), transparent 50%),
    linear-gradient(120deg, #0B1220, #0E2233);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
}
.contact-info-card {
  background: linear-gradient(150deg, #0B1220, #0E2233);
  border: 1px solid var(--border);
}
.photo-badge { background: rgba(7, 11, 20, .80); border-color: rgba(217, 154, 62, .4); }
.photo-panel, .photo-banner { box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }

/* ---------- 表單 ---------- */
.contact-form { box-shadow: var(--shadow); }
.form-group input, .form-group textarea {
  background: #0B1220;
  border-color: var(--border);
  color: #E8F1FF;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: #00E5FF;
  background: #0E1628;
}
#map-container { border-color: var(--border); }

/* ---------- 案例篩選 / 流程 / FAQ ---------- */
.filter-btn { background: #0E1628; border-color: var(--border); }
.filter-btn.on { background: var(--grad-gold); border-color: transparent; }

/* ---------- Footer / 浮動元件 ---------- */
.site-footer { background: #05080F; }
.back-top {
  background: linear-gradient(135deg, #0E2233, #123B4A);
  border: 1px solid rgba(0, 229, 255, .35);
}

/* ============================================================
   動畫一：Hero 標題逐字浮現（JS 拆分字符後生效）
   ============================================================ */
.hero h1 .gs-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
}
.hero h1 .gs-ch.gs-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s var(--ease-out);
  animation: gs-ch-glow .9s ease both;
}
/* 拆分後 <em> 的漸變移到字符級，避免 background-clip 斷裂 */
.hero h1.gs-split em {
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero h1 .gs-ch.gs-em {
  background: linear-gradient(100deg, #B9F6FF 0%, #00E5FF 45%, #8FF0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gs-ch-glow {
  0% { text-shadow: 0 0 0 rgba(0, 229, 255, 0); }
  40% { text-shadow: 0 0 18px rgba(0, 229, 255, .55); }
  100% { text-shadow: 0 0 0 rgba(0, 229, 255, 0); }
}

/* ============================================================
   動畫二：卡片 3D 傾斜 + 流光邊框（JS 加 .tilt-glow）
   ============================================================ */
@property --ga {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.tilt-glow { position: relative; }
.tilt-glow::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ga, 0deg),
    transparent 0%, rgba(0, 229, 255, .55) 12%, transparent 28%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.tilt-glow:hover::after {
  opacity: 1;
  animation: gs-glow-spin 2.6s linear infinite;
}
@keyframes gs-glow-spin { to { --ga: 360deg; } }

/* ---------- 移動端深色補齊 ---------- */
@media (max-width: 760px) {
  .main-nav {
    background: #0B1220;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  }
}

/* ---------- 減少動態效果：全部關閉，內容完整可讀 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .gs-ch { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tilt-glow::after { display: none; }
}