/* ============================================================
   首頁專屬樣式
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:88px 0 96px;
  background:
    radial-gradient(1200px 560px at 85% -8%, rgba(124,58,237,0.13), transparent 58%),
    radial-gradient(900px 480px at 0% 8%, rgba(37,99,235,0.11), transparent 55%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.hero-net{position:absolute; inset:0; width:100%; height:100%; opacity:0.55; pointer-events:none;}
.hero-inner{position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
@media (max-width:920px){ .hero-inner{grid-template-columns:1fr; gap:44px;} }

.hero h1{font-size:clamp(30px,4.8vw,48px); line-height:1.28; letter-spacing:0.005em;}
.hero h1 .accent{display:block;}
.hero .lede{margin-top:20px; font-size:16.5px; color:var(--ink-soft); max-width:520px; line-height:1.85;}
.hero-actions{margin-top:32px; display:flex; gap:12px; flex-wrap:wrap;}

.hero-stats{margin-top:40px; display:flex; gap:32px; flex-wrap:wrap;}
.hero-stats .stat{min-width:0;}
.hero-stats .stat b{
  display:block; font-size:52px; font-weight:800; line-height:1.1;
  letter-spacing:-1px;
}
.hero-stats .stat b span{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-stats .stat > span{font-size:13px; color:var(--ink-soft); font-weight:600; margin-top:6px; display:block;}
@media (max-width:480px){
  .hero-stats{gap:24px;}
  .hero-stats .stat b{font-size:38px;}
}

/* ---------- Hero 即時運作數據（V14.0 新增） ---------- */
.stat-live > span{display:flex !important; align-items:center; gap:6px; margin-top:6px;}
.stat-live-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#22C55E; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,0.6);
  animation:statLivePulse 1.4s ease-out infinite;
}
@keyframes statLivePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.6); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.hero-stats .stat b.is-updating span{ animation:statValueFlash .4s ease; display:inline-block; }
@keyframes statValueFlash{
  0%{ opacity:1; transform:scale(1); }
  40%{ opacity:0.5; transform:scale(1.1); }
  100%{ opacity:1; transform:scale(1); }
}

/* ---- Hero 背景光暈（V4.0 新增，柔和大範圍色塊漂浮） ---- */
.hero-glow{position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; z-index:0;}
.hero-glow-a{
  width:420px; height:420px; top:-140px; right:-60px;
  background:radial-gradient(circle, rgba(6,182,212,0.22), transparent 70%);
  animation:heroGlowDriftA 16s ease-in-out infinite;
}
.hero-glow-b{
  width:360px; height:360px; bottom:-160px; right:220px;
  background:radial-gradient(circle, rgba(217,70,239,0.16), transparent 70%);
  animation:heroGlowDriftB 20s ease-in-out infinite;
}
@keyframes heroGlowDriftA{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-30px,26px) scale(1.08); }
}
@keyframes heroGlowDriftB{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(24px,-20px) scale(1.05); }
}

.hero-net-twinkle circle{animation:heroTwinkle 3.4s ease-in-out infinite;}
.hero-net-twinkle circle:nth-child(2){animation-delay:1s;}
.hero-net-twinkle circle:nth-child(3){animation-delay:2s;}
@keyframes heroTwinkle{
  0%,100%{ opacity:0.15; }
  50%{ opacity:0.85; }
}

/* ---- Hero 視覺主體：多層軌道、漂浮、脈動（V4.0 新增） ---- */
.hero-visual{position:relative; z-index:1; display:flex; align-items:center; justify-content:center;}
.hero-orbit-wrap{position:relative; width:100%; max-width:440px; aspect-ratio:1/1;}

.hero-orbit,
.hero-core{position:absolute !important; inset:0; width:100% !important; height:100% !important; max-width:none !important;}

.hero-orbit-cw{animation:heroSpinCW 40s linear infinite; transform-origin:50% 50%;}
.hero-orbit-ccw{animation:heroSpinCCW 55s linear infinite; transform-origin:50% 50%;}
@keyframes heroSpinCW{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes heroSpinCCW{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.hero-float{animation:heroFloat 6s ease-in-out infinite;}
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.hero-pulse{animation:heroPulse 4s ease-in-out infinite; transform-origin:200px 200px;}
@keyframes heroPulse{
  0%,100%{ opacity:0.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

.hero-node-pulse circle{animation:heroNodeGlow 3s ease-in-out infinite;}
.hero-node-pulse circle:nth-child(2){animation-delay:.4s;}
.hero-node-pulse circle:nth-child(3){animation-delay:.8s;}
.hero-node-pulse circle:nth-child(4){animation-delay:1.2s;}
.hero-node-pulse circle:nth-child(5){animation-delay:1.6s;}
.hero-node-pulse circle:nth-child(6){animation-delay:2s;}
@keyframes heroNodeGlow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(124,58,237,0)); }
  50%{ filter:drop-shadow(0 0 6px rgba(124,58,237,0.65)); }
}

.hero-ai-node{animation:heroAiNodeGlow 2.4s ease-in-out infinite;}
@keyframes heroAiNodeGlow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(6,182,212,0)); }
  50%{ filter:drop-shadow(0 0 7px rgba(6,182,212,0.85)); }
}

.hero-particle{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(6,182,212,0.9), rgba(6,182,212,0));
}
.hero-particle.p1{width:8px; height:8px; top:6%; left:14%; animation:heroParticleFloat 7s ease-in-out infinite;}
.hero-particle.p2{width:6px; height:6px; top:70%; left:4%; background:radial-gradient(circle, rgba(217,70,239,0.9), rgba(217,70,239,0)); animation:heroParticleFloat 9s ease-in-out infinite 1.2s;}
.hero-particle.p3{width:5px; height:5px; top:18%; right:2%; background:radial-gradient(circle, rgba(124,58,237,0.9), rgba(124,58,237,0)); animation:heroParticleFloat 8s ease-in-out infinite 2s;}
.hero-particle.p4{width:7px; height:7px; bottom:8%; right:16%; animation:heroParticleFloat 6.5s ease-in-out infinite .6s;}
@keyframes heroParticleFloat{
  0%,100%{ transform:translateY(0) translateX(0); opacity:0.5; }
  50%{ transform:translateY(-18px) translateX(8px); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-glow-a,.hero-glow-b,.hero-net-twinkle circle,
  .hero-orbit-cw,.hero-orbit-ccw,.hero-float,.hero-pulse,
  .hero-node-pulse circle,.hero-ai-node,.hero-particle,
  .stat-live-dot,.hero-stats .stat b.is-updating{ animation:none !important; }
}

/* ---------- Trust strip ---------- */
.trust-strip{padding:34px 0; border-bottom:1px solid var(--line); background:var(--card);}
.trust-strip .wrap{display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between;}
.trust-strip .t-item{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); font-weight:600;}
.trust-strip .t-item svg{width:20px; height:20px; color:var(--violet); flex-shrink:0;}

/* ---------- AI Company 如何運作 ---------- */
.ai-flow{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; margin-bottom:44px;
}
.ai-flow-node{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; min-width:104px; text-align:center;
}
.ai-flow-icon{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-grad-soft); color:var(--indigo);
}
.ai-flow-icon svg{width:20px; height:20px;}
.ai-flow-label{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4;}
.ai-flow-arrow{font-size:18px; color:var(--ink-faint); font-weight:700;}
@media (max-width:760px){
  .ai-flow{flex-direction:column;}
  .ai-flow-arrow{transform:rotate(90deg);}
}

.ai-feature-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;}
@media (max-width:980px){ .ai-feature-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:640px){ .ai-feature-grid{grid-template-columns:repeat(2, 1fr);} }
.ai-feature-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 18px; transition:transform .18s ease, box-shadow .18s ease;
}
.ai-feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.ai-feature-card .icon-tile{margin-bottom:14px;}
.ai-feature-card h3{font-size:14.5px; margin-bottom:8px;}
.ai-feature-card p{font-size:12px; color:var(--ink-soft); line-height:1.65;}

/* ---------- 十大部門 grid ---------- */
.dept-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
@media (max-width:980px){ .dept-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:640px){ .dept-grid{grid-template-columns:repeat(2, 1fr); gap:10px;} }

.dept-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 16px; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dept-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;}
.dept-card .num{font-size:11px; color:var(--ink-faint); font-weight:700; letter-spacing:0.06em;}
.dept-card .hex-icon{width:52px; height:52px; margin:10px auto 12px;}
.dept-card h3{font-size:14px; line-height:1.4; font-weight:700;}
.dept-card p{margin-top:6px; font-size:11.5px; color:var(--ink-faint); line-height:1.5;}

/* ---------- Product showcase ---------- */
.product-scroll{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:980px){ .product-scroll{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .product-scroll{grid-template-columns:1fr;} }

.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; display:flex; flex-direction:column; gap:14px;
  transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none; color:inherit; cursor:pointer;
}
.product-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.product-card .p-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-grad);
}
.product-card .p-icon svg{width:24px; height:24px; color:#fff;}
.product-card h3{font-size:16px;}
.product-card .p-tag{font-size:11.5px; color:var(--violet); font-weight:700; letter-spacing:0.03em;}
.product-card p.desc{font-size:13px; color:var(--ink-soft); line-height:1.7; flex:1;}
.product-card .p-link{
  font-size:13px; font-weight:700; color:var(--indigo); display:inline-flex; align-items:center; gap:5px;
}
.product-card .p-link svg{width:14px; height:14px; transition:transform .15s ease;}
.product-card:hover .p-link svg{transform:translate(2px,-2px);}

/* ---------- Process steps ---------- */
.process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:860px){ .process-row{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .process-row{grid-template-columns:1fr;} }
.process-step{position:relative; padding:26px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);}
.process-step .p-num{
  font-size:12px; font-weight:700; color:#fff; width:28px; height:28px; border-radius:50%;
  background:var(--brand-grad); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.process-step h4{font-size:15px; margin-bottom:8px;}
.process-step p{font-size:12.5px; color:var(--ink-soft); line-height:1.7;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--brand-grad); border-radius:28px; padding:52px 44px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band h2{color:#fff; font-size:clamp(22px,3.2vw,30px);}
.cta-band p{color:rgba(255,255,255,0.86); margin-top:12px; font-size:15px;}
.cta-band .cta-actions{margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta-band .btn-primary{background:#fff; color:var(--indigo); box-shadow:0 10px 26px -8px rgba(0,0,0,0.28);}
.cta-band .btn-ghost{background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.35);}
.cta-band .btn-ghost:hover{border-color:#fff; color:#fff;}
@media (max-width:640px){ .cta-band{padding:40px 24px;} }