/* AI 自動化回廠通知 — product website */
:root {
  --bg: #07111f;
  --bg-soft: #0b1828;
  --surface: rgba(255,255,255,.06);
  --surface-strong: rgba(255,255,255,.095);
  --line: rgba(255,255,255,.12);
  --text: #f4f8ff;
  --muted: #9fb0c8;
  --cyan: #35d8ff;
  --blue: #4f8cff;
  --mint: #5ff0cc;
  --ink: #0b1724;
  --white: #ffffff;
  --max: 1180px;
  --radius: 26px;
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter","Noto Sans TC",system-ui,-apple-system,sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(56,122,255,.15), transparent 32rem),
    linear-gradient(180deg, #07111f 0%, #07111f 58%, #091625 100%);
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.page-glow {
  position: fixed; width: 500px; height: 500px; border-radius: 999px;
  filter: blur(120px); pointer-events: none; opacity: .08; z-index: -1;
}
.page-glow-1 { background: #2a7cff; top: 20%; left: -250px; }
.page-glow-2 { background: #38e7c3; right: -260px; top: 55%; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,17,31,.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav { height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(145deg, rgba(53,216,255,.18), rgba(79,140,255,.22));
  border: 1px solid rgba(95,240,204,.2);
  color: var(--cyan); display: grid; place-items: center;
}
.brand-mark svg { width: 28px; height: 28px; }
.brand strong { display:block; font-size: 15px; letter-spacing: .01em; line-height:1.2; }
.brand small { display:block; font-size: 10px; color: var(--muted); letter-spacing:.08em; margin-top:3px; }
.nav-links { display:flex; gap:30px; margin-left:auto; }
.nav-links a { color:#c9d6e6; font-size:14px; transition:.2s; }
.nav-links a:hover { color:var(--white); }
.menu-toggle { display:none; background:none; border:0; color:white; padding:8px; }
.menu-toggle span { display:block; width:22px; height:2px; background:currentColor; margin:5px 0; }


.lang-switch {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:max-content;
  font-size:12px;
  font-weight:700;
  color:#7f93aa;
}
.lang-switch a { color:#95a8bd; transition:color .2s ease; }
.lang-switch a:hover { color:#ffffff; }
.lang-switch .active { color:#ffffff; }
.lang-divider { color:#52667b; font-weight:500; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 20px; border-radius:14px; font-weight:700; font-size:14px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  border:1px solid transparent; cursor:pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-small { padding:10px 15px; font-size:13px; }
.btn-primary {
  color:#03111c; background: linear-gradient(135deg, var(--cyan), var(--mint));
  box-shadow: 0 12px 32px rgba(53,216,255,.17);
}
.btn-secondary, .btn-ghost {
  background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.14); color:var(--white);
}
.btn-secondary:hover, .btn-ghost:hover { border-color:rgba(53,216,255,.45); }
.btn-light { background:white; color:#07111f; padding:16px 22px; }

.hero { min-height: 760px; display:flex; align-items:center; padding-top:92px; }
.hero-grid { display:grid; grid-template-columns: 1.08fr .92fr; gap:76px; align-items:center; }
.eyebrow {
  color:#89ddff; font-size:12px; font-weight:800; letter-spacing:.14em;
  display:flex; align-items:center; gap:10px; text-transform:uppercase; margin-bottom:20px;
}
.eyebrow span { width:28px; height:2px; background:linear-gradient(90deg,var(--cyan),var(--mint)); }
.eyebrow.light { color:#c9f6ff; }
.hero h1 {
  font-size: clamp(44px,5.6vw,76px); line-height:1.08; letter-spacing:-.045em;
  margin:0 0 26px; max-width:760px;
}
.gradient-text {
  background: linear-gradient(110deg,#f7fbff 12%,#6adfff 55%,#71f0d4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead { max-width:690px; color:#b6c5d8; font-size:18px; margin:0 0 32px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust {
  margin-top:42px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.hero-trust div { display:flex; flex-direction:column; }
.hero-trust strong { font-size:14px; }
.hero-trust span { font-size:11px; color:#8194aa; }
.hero-trust i { width:1px; height:28px; background:rgba(255,255,255,.12); }

.hero-visual { perspective:1000px; }
.visual-card {
  border:1px solid rgba(255,255,255,.12); border-radius:28px;
  background: linear-gradient(180deg, rgba(17,37,59,.82), rgba(8,22,37,.9));
  padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.visual-card::before {
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(53,216,255,.12); filter:blur(55px); right:-70px; top:-60px;
}
.visual-topbar { display:flex; align-items:center; gap:9px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.visual-topbar span { font-size:13px; font-weight:700; }
.visual-topbar small { margin-left:auto; color:#72e8c8; font-size:10px; }
.status-dot { width:8px;height:8px;border-radius:50%;background:#63efc8;box-shadow:0 0 0 6px rgba(99,239,200,.08); }
.score-panel {
  margin:18px 0; padding:20px; border-radius:20px; background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:space-between;
}
.mini-label { display:block; color:#7f93aa; font-size:11px; margin-bottom:5px; }
.score-panel strong { font-size:28px; }
.score-panel p { color:#8fa1b8; font-size:11px; margin:3px 0 0; }
.score-ring {
  width:86px;height:86px;border-radius:50%; display:grid;place-items:center;align-content:center;
  background: radial-gradient(circle at center,#0d2134 60%,transparent 62%),
              conic-gradient(var(--cyan) 0 86%,rgba(255,255,255,.09) 86%);
}
.score-ring span { font-size:23px;font-weight:800;line-height:1; }
.score-ring small { font-size:9px;color:#8fa1b8;margin-top:3px; }
.signal-list { display:grid; gap:9px; }
.signal-item {
  display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center;
  padding:12px 13px; border:1px solid rgba(255,255,255,.07); border-radius:15px;
  background:rgba(255,255,255,.025);
}
.signal-icon {
  width:34px;height:34px;border-radius:10px;background:rgba(53,216,255,.08);
  color:#76def7;display:grid;place-items:center;font-size:10px;font-weight:800;
}
.signal-item strong{display:block;font-size:12px}
.signal-item span{display:block;font-size:10px;color:#7e91a8;margin-top:2px}
.signal-item em{font-size:10px;color:#70e9c8;font-style:normal;background:rgba(95,240,204,.08);padding:5px 8px;border-radius:999px}
.call-card {
  margin-top:16px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px;
  background:linear-gradient(135deg,rgba(53,216,255,.11),rgba(95,240,204,.07));
  border:1px solid rgba(95,240,204,.13); padding:13px;border-radius:16px;
}
.call-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#1b4354;color:#7af3d4; }
.call-icon svg{width:22px}
.call-card small{display:block;font-size:10px;color:#8ca0b6}
.call-card strong{font-size:12px}
.live-pill{font-size:10px;color:#75ecd0}

.pain-strip { border-block:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); padding:30px 0; }
.pain-strip .container { display:flex; gap:28px; align-items:center; }
.pain-strip p { color:#8fa0b5; font-size:13px; min-width:max-content; margin:0; }
.pain-items { display:flex; gap:9px; flex-wrap:wrap; }
.pain-items span { font-size:12px; padding:8px 12px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#ccd8e7; background:rgba(255,255,255,.025); }

.section-heading { max-width:720px; margin-bottom:50px; }
.section-heading.compact { max-width:800px; }
.section-heading h2 { font-size:clamp(34px,4vw,54px); line-height:1.14; letter-spacing:-.035em; margin:0 0 18px; }
.section-heading p { color:#92a5bb; max-width:640px; margin:0; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card {
  position:relative; min-height:330px; padding:28px; border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border-radius:22px; overflow:hidden; transition:.25s ease;
}
.feature-card:hover { transform:translateY(-4px); border-color:rgba(53,216,255,.26); background:linear-gradient(180deg,rgba(53,216,255,.055),rgba(255,255,255,.02)); }
.feature-no { position:absolute; right:24px; top:20px; font-size:11px; color:#51667e; font-weight:800; }
.feature-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(53,216,255,.08);color:#6bdff8;font-size:20px;margin-bottom:48px; }
.feature-card h3 { margin:0 0 10px; font-size:21px; }
.feature-card p { color:#8fa2b8; font-size:13px; min-height:66px; }
.feature-card ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px; }
.feature-card li { color:#c0cddd; font-size:12px; padding-left:18px; position:relative; }
.feature-card li::before { content:""; width:5px;height:5px;border-radius:50%;background:#57e2c3;position:absolute;left:0;top:.75em; }

.workflow-section { background:linear-gradient(180deg,transparent,rgba(255,255,255,.02),transparent); }
.workflow { position:relative; display:grid; gap:12px; margin-top:38px; }
.workflow-line { position:absolute;left:27px;top:26px;bottom:26px;width:1px;background:linear-gradient(var(--cyan),rgba(255,255,255,.08)); }
.workflow-step { position:relative; display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:center; }
.step-num {
  z-index:1;width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  background:#0c2032;border:1px solid rgba(53,216,255,.22);color:#78e2f9;font-weight:800;
}
.step-content {
  padding:22px 24px; border:1px solid rgba(255,255,255,.075); border-radius:18px;
  background:rgba(255,255,255,.025);
}
.step-content small { color:#4fd9f5;font-weight:800;letter-spacing:.13em;font-size:9px; }
.step-content h3 { margin:2px 0 5px;font-size:17px; }
.step-content p { margin:0;color:#889bb1;font-size:13px; }

.dashboard-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:70px;align-items:center; }
.dashboard-copy h2 { font-size:clamp(34px,4vw,52px);line-height:1.15;letter-spacing:-.035em;margin:0 0 18px; }
.dashboard-copy > p { color:#91a4ba; }
.metric-list { margin-top:30px; display:grid; gap:10px; }
.metric-list div { display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07); }
.metric-list span { color:#4fd9f5;font-size:10px;font-weight:800; }
.metric-list p { margin:0;font-size:12px;color:#8fa0b4; }
.metric-list strong { display:block;color:#edf5ff;font-size:13px; }

.dashboard-mock {
  background:#eef4f8;color:#11202e;border-radius:26px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.28);
}
.dash-top { display:flex;justify-content:space-between;align-items:center; }
.dash-top strong { display:block;font-size:15px; }
.period-switch{border:1px solid #d7e1e8;border-radius:10px;padding:7px 11px;background:white;font-size:11px;color:#475b69}
.dash-kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0; }
.dash-kpis div { background:white;border:1px solid #e0e7ec;border-radius:15px;padding:15px; }
.dash-kpis span { display:block;font-size:10px;color:#7b8c97; }
.dash-kpis strong { font-size:24px;margin-right:3px; }
.dash-kpis small { color:#86949e; }
.chart-wrap { background:white;border:1px solid #e1e8ed;border-radius:16px;padding:15px 15px 5px; }
.chart-labels {display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700}
.chart-labels small { color:#9aa7af;font-weight:500; }
.chart { width:100%;height:auto; }
.grid-lines line{stroke:#e7edf1;stroke-width:1}
.area{fill:url(#areaGrad)}
.line{fill:none;stroke:#16a6c8;stroke-width:4;stroke-linecap:round}
.reason-bars {display:grid;gap:10px;margin-top:16px}
.reason-bars div{display:grid;grid-template-columns:120px 1fr 34px;gap:10px;align-items:center;font-size:10px;color:#5f6e78}
.reason-bars b{display:block;height:7px;background:#dce6eb;border-radius:999px;position:relative}
.reason-bars b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#20b3d0,#46d8b8)}
.reason-bars em{font-style:normal;text-align:right}

.security-panel {
  border-radius:30px;padding:50px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;
  background:linear-gradient(135deg,rgba(29,75,102,.5),rgba(13,32,49,.65));
  border:1px solid rgba(100,222,246,.14);
}
.security-panel h2 { font-size:36px;line-height:1.18;margin:0 0 16px;letter-spacing:-.03em; }
.security-panel p { color:#9fb3c7;font-size:13px; }
.security-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.security-grid div { padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03); }
.security-grid span { display:block;color:#59def3;font-size:9px;font-weight:800; }
.security-grid strong { display:block;font-size:14px;margin:5px 0; }
.security-grid small { color:#8095aa;font-size:11px; }

.value-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.value-card { min-height:190px;border-top:1px solid rgba(53,216,255,.35);padding:24px 18px;background:rgba(255,255,255,.02); }
.value-card strong { display:block;font-size:17px;margin-bottom:12px; }
.value-card p { color:#879bb0;font-size:12px;margin:0; }

.faq-grid { display:grid;grid-template-columns:.68fr 1.32fr;gap:80px; }
.faq-list { border-top:1px solid rgba(255,255,255,.1); }
.faq-list details { border-bottom:1px solid rgba(255,255,255,.1); }
.faq-list summary { list-style:none;cursor:pointer;padding:21px 0;font-weight:700;font-size:14px;display:flex;justify-content:space-between;gap:20px; }
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:20px;color:#6fdff5;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list p { color:#8ea1b6;font-size:12px;margin:-3px 0 22px;max-width:720px; }

.contact-panel {
  border-radius:30px;padding:50px 54px;background:linear-gradient(135deg,#0c8eb5,#1da58d);
  display:flex;justify-content:space-between;gap:40px;align-items:center;box-shadow:0 28px 80px rgba(0,85,105,.2);
}
.contact-panel h2{font-size:34px;max-width:720px;line-height:1.18;margin:0 0 12px;letter-spacing:-.03em}
.contact-panel p{margin:0;color:rgba(255,255,255,.75);font-size:13px}


.contact-email {
  display:inline-flex;
  margin-top:14px;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.42);
  transition:opacity .2s ease, border-color .2s ease;
}
.contact-email:hover { opacity:.82; border-color:#fff; }
.footer-email { color:#9fb3c7; transition:color .2s ease; }
.footer-email:hover { color:#ffffff; }

footer { padding:34px 0 46px;border-top:1px solid rgba(255,255,255,.07); }
.footer-inner { display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:30px; }
.footer-inner > p,.footer-inner > small { color:#70849a;font-size:10px;margin:0; }


.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}

@media (max-width: 980px) {
  .nav-links { display:none; }
  .nav > .btn { margin-left:auto; }
  .menu-toggle { display:block; }
  .hero { min-height:auto; }
  .hero-grid, .dashboard-grid, .security-panel, .faq-grid { grid-template-columns:1fr; }
  .hero-grid { gap:52px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .value-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .security-panel { gap:38px; }
  .faq-grid { gap:32px; }
}
@media (max-width: 680px) {
  .container { width:min(100% - 28px,var(--max)); }
  .section { padding:78px 0; }
  .nav { height:68px; }
  .nav > .btn { display:none; }
  .brand strong { font-size:13px; }
  .hero { padding-top:64px; }
  .hero h1 { font-size:43px; }
  .hero-lead { font-size:15px; }
  .hero-trust { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
  .hero-trust i { display:none; }
  .feature-grid, .value-grid, .security-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .feature-card p { min-height:auto; }
  .pain-strip .container { align-items:flex-start;flex-direction:column;gap:12px; }
  .dashboard-mock { padding:16px; }
  .dash-kpis { grid-template-columns:1fr; }
  .reason-bars div { grid-template-columns:100px 1fr 30px; }
  .security-panel { padding:28px; }
  .contact-panel { padding:34px 26px;flex-direction:column;align-items:flex-start; }
  .contact-panel h2 { font-size:28px; }
}


@media (max-width: 980px) {
  .lang-switch { margin-left:auto; }
  .nav > .lang-switch + .btn { margin-left:0; }
}
@media (max-width: 680px) {
  .lang-switch { font-size:11px; }
}