/* 字型與全域 */
:root{
  --bg:#0b0e14; --card:#111726cc; --border:#ffffff22; --text:#ffffffde; --muted:#ffffffa0;
  --brand1:#6366f1; --brand2:#06b6d4; --brand3:#22d3ee;
  --glow1:rgba(99,102,241,.35); --glow2:rgba(34,211,238,.28);
  --surface:#0f1420; --chip:#0009; --link:#9be9ff;
}
[data-theme="light"]{
  --bg:#f7fbff; --card:#ffffffea; --border:#00000014; --text:#0b1020; --muted:#233045b0;
  --surface:#eef6ff; --chip:#ffffffdd; --link:#0369a1; --glow1:rgba(14,165,233,.25); --glow2:rgba(99,102,241,.18);
}

html,body{height:100%}
body{
  margin:0; color:var(--text); background:
    radial-gradient(60rem 60rem at 15% -10%, var(--glow1), transparent 60%),
    radial-gradient(60rem 60rem at 85% -10%, var(--glow2), transparent 60%), var(--bg);
  font:16px/1.6 'Noto Sans TC','Microsoft JhengHei', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  min-height:100dvh;
}
/* 淡淡網格 */
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0); background-size:36px 36px; z-index:-1}

.container{max-width:1200px; margin-inline:auto; padding:0 20px}
.section{padding:72px 0}
.title{font-size:clamp(28px, 3vw, 40px); font-weight:800}
.subtitle{color:var(--muted); margin-top:8px}
.with-border-top{border-top:1px solid var(--border)}

/* Navbar */
.nav{position:sticky; inset-block-start:0; z-index:50; backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border); background:#0006}
[data-theme="light"] .nav{background:#ffffffd6}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.logo{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand1), var(--brand3)); box-shadow:0 10px 30px var(--glow2)}
.brand h1{margin:0; font-size:18px}
.brand small{display:block; color:color-mix(in oklab, var(--text), transparent 40%); letter-spacing:.18em}
.menu{display:flex; gap:22px}
.menu a{color:color-mix(in oklab, var(--text), transparent 35%); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent}
.menu a:hover{color:var(--text)}
.menu a.active{border-color:var(--brand2); color:var(--text)}
.actions{display:flex; gap:10px; align-items:center}
.icon-btn{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg), white 6%); cursor:pointer}
.icon-btn .moon{display:none}
[data-theme="light"] .icon-btn .sun{display:none}
[data-theme="light"] .icon-btn .moon{display:block}

/* Hero */
.hero{display:grid; grid-template-columns:1fr; gap:32px; align-items:center}
.badge{display:inline-block; border:1px solid var(--border); background:color-mix(in oklab, var(--bg), white 6%); padding:6px 10px; border-radius:999px; color:color-mix(in oklab, var(--text), transparent 35%); font-size:12px}
.hero h2{font-size:clamp(36px, 6vw, 60px); line-height:1.1; margin:16px 0 0; font-weight:900}
.gradient-text{background: linear-gradient(90deg, #ffffff, #d2f7ff, #7dd3fc);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;}
[data-theme="light"] .gradient-text{background: linear-gradient(90deg, #0b1020, #155e75, #1e40af);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;text-shadow: 0 0 1px rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.25);}
@media (prefers-contrast: more){.gradient-text{background: none !important;color: #0b1020 !important;-webkit-text-fill-color: currentColor !important;text-shadow: none !important;}
[data-theme="light"] .gradient-text{color: #0b1020 !important;}}
.hero p{max-width:56ch; color:var(--muted); font-size:18px}
.hero-art{position:relative; aspect-ratio:1/1; border-radius:28px; border:1px solid var(--border); background:linear-gradient(135deg,var(--surface),var(--bg)); padding:24px; box-shadow:0 30px 60px #0008}
.chip{position:absolute; font-size:12px; border:1px solid var(--border); background:var(--chip); padding:6px 10px; border-radius:12px}
.chip.tl{left:-12px; top:-12px}
.chip.br{right:-12px; bottom:-12px}
.cpu{display:grid; place-items:center; height:100%}
.cpu .icon{width:80px; height:80px}
.cpu-label{margin-top:8px; color:color-mix(in oklab, var(--text), transparent 35%); font-size:12px}

/* Cards / grids */
.cards4{display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:20px}
.features{display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:20px}
.grid2{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:768px){ .hero{grid-template-columns:1.1fr .9fr} .cards4{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .cards4{grid-template-columns:repeat(4,1fr)} .features{grid-template-columns:repeat(3,1fr)} }

.card{position:relative; border:1px solid var(--border); background:var(--card); border-radius:18px; padding:22px; box-shadow:0 20px 40px #0006; transform-style:preserve-3d}
.card h3{margin:10px 0 6px}
.card p{color:var(--muted); margin:0}
.inline{color:var(--link); text-underline-offset:4px}
.inline:hover{text-decoration:underline}
.catalog{padding:18px}
.catalog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.catalog-grid > div{border:1px solid var(--border); background:var(--card); border-radius:12px; padding:14px; text-align:center}

.pill{display:inline-grid; place-items:center; padding:12px 18px; border-radius:16px; color:#fff; font-weight:700; text-decoration:none; border:0; cursor:pointer; background:linear-gradient(90deg, var(--brand1), var(--brand2)); box-shadow:0 12px 30px var(--glow1)}
.pill.ghost{background:color-mix(in oklab, var(--bg), white 6%); border:1px solid var(--border); box-shadow:none; font-weight:600; color:var(--text)}
.feature{border:1px solid var(--border); background:var(--card); border-radius:16px; padding:18px}
.feature h4{margin:0 0 6px}
.feature p{margin:0; color:var(--muted)}

/* 表單 */
.form{border:1px solid var(--border); background:var(--card); border-radius:18px; padding:18px}
.form label{display:block; font-size:14px; color:color-mix(in oklab, var(--text), transparent 30%)}
.form input,.form textarea{width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; background:color-mix(in oklab, var(--bg), white 6%); color:var(--text); border:1px solid var(--border); outline:none}
.form input:focus,.form textarea:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--brand3), transparent 60%)}
.row2{display:grid; grid-template-columns:1fr; gap:14px}
.row2 .full{grid-column:1/-1}
@media (min-width:768px){ .row2{grid-template-columns:repeat(2,1fr)} }
.form-actions{display:flex; align-items:center; justify-content:space-between; margin-top:8px}

/* Footer */
.footer{border-top:1px solid var(--border); color:color-mix(in oklab, var(--text), transparent 40%)}
.footer-inner{display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:28px 0}
.footer .links a{color:inherit; text-decoration:none}
.footer .links a:hover{color:var(--text)}

/* 自訂游標 */
/* 建議：只在桌機隱藏原生游標，避免行動裝置輸入問題 */
@media (pointer:fine) {
  body { cursor: none; }
}

/* 老鼠游標容器 */
#mouse-follower{
  position: fixed;
  left: 0; top: 0;
  width: 56px; height: 28px;          /* 初始尺寸（SVG 會自適應） */
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  color: #7c8cff;                      /* 老鼠主色，可改：var(--brand1) */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition: filter .25s ease;
  will-change: transform;
}

/* 可互動元素上方：老鼠變大、變亮 */
.cursor-big #mouse-follower{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.cursor-big #mouse-follower svg{
  transform: scale(1.12);
}

/* 讓 SVG 自然鋪滿容器 */
#mouse-follower svg{ width:100%; height:100%; transform-origin:center; }

/* 尾巴微擺動（一直輕微搖） */
#mouse-follower .tail{
  transform-origin: 90px 35px;
  animation: tail-wag 1.2s ease-in-out infinite;
}
@keyframes tail-wag{
  0%,100%{ transform: rotate(6deg); }
  50%    { transform: rotate(-6deg); }
}

/* 點擊時跳一下 */
#mouse-follower.click svg{
  animation: boop .25s ease;
}
@keyframes boop{
  0%   { transform: translateY(0) scale(1.0); }
  50%  { transform: translateY(-4px) scale(1.08); }
  100% { transform: translateY(0) scale(1.0); }
}
/* 手機沒游標，就不用顯示老鼠了 */
@media (pointer: coarse) {
  #mouse-follower { display: none; }
}

/* 亮色/暗色主題可各自微調顏色（選填） */
[data-theme="light"] #mouse-follower{ color:#5b6bff; }
[data-theme="dark"]  #mouse-follower{ color:#8aa3ff; }


/* 附加工具 */
.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.list{margin:10px 0 0 1em; padding:0}
.list li{margin:.3em 0}

/* Hero 新示意圖樣式 */
.hero-illustration{
  position:relative;
  display:grid;
  place-items:center;
  height:100%;
  min-height:260px;
}

.icon-lg{
  width:140px; height:140px;
  color: var(--text);
  z-index:2;
}
.icon-lg, .icon-lg *{ vector-effect: non-scaling-stroke; }

.hero-legend{
  z-index:2;
  margin-top:10px;
  font-size:12px;
  color: color-mix(in oklab, var(--text), transparent 35%);
}

/* 雷達脈衝圈效果 */
.hero-illustration .ring{
  position:absolute; inset:0; margin:auto;
  width:220px; height:220px; border-radius:50%;
  border:1px solid var(--border);
  animation: ring-pulse 3.2s infinite ease-out;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--brand3), transparent 70%));
}
.hero-illustration .ring.r2{ width:260px; height:260px; animation-delay:.8s; }
.hero-illustration .ring.r3{ width:300px; height:300px; animation-delay:1.6s; }

@keyframes ring-pulse{
  0%{ opacity:.7; transform: scale(.85); }
  70%{ opacity:.18; }
  100%{ opacity:0; transform: scale(1.15); }
}

/* 掃描線（垂直往返） */
.hero-illustration .scan{
  position:absolute; top:10%; bottom:10%; width:2px; z-index:1;
  background: linear-gradient(180deg, transparent, var(--brand3), transparent);
  animation: scan-move 2.8s infinite ease-in-out;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand3), transparent 50%));
}
@keyframes scan-move{
  0%{ left:20%; }
  50%{ left:80%; }
  100%{ left:20%; }
}

/* 底下三個服務標籤 */
.hero-features{
  list-style:none; padding:0; margin:16px 0 0;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.hero-features li{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--card);
  padding:8px 12px; border-radius:12px; font-size:13px; color: var(--text);
}
.hero-features svg{ width:18px; height:18px; }