/* ======================================================
   Basic
====================================================== */
:root{
  --hp-bg: #e9eeff;
  --hp-bg-soft: #f5f7ff;
  --hp-shell: #fdfdff;
  --hp-accent: #4d6bff;
  --hp-accent-soft: #9fb4ff;
  --hp-accent-neon: #6ff3ff;
  --hp-text-main: #1a2340;
  --hp-text-sub: #5d6685;
  --hp-pill-bg: #ffffff;
  --hp-pill-border: rgba(150,170,230,.55);
  --hp-radius-xl: 32px; 
  --hp-card-bg:rgba(255,255,255,0.22);
  --hp-card-border:rgba(255,255,255,0.38);
  --hp-glow:rgba(120,150,255,0.36);
  --hp-radius:24px; 
  --hp-shadow-soft:0 28px 60px rgba(15,35,95,.25); 
  
}
/* Utility container */
.section {
  padding:80px 20px;
  /* position:relative; */
}

.section-title {
  text-align:center;
  margin:0 auto 40px;
  /* margin-bottom:45px; */
   max-width:720px;
}

.section-title h2 {
  font-size:1.9rem;
  margin:0 0 10px;
  /* color:var(--hp-text-main);
  margin-bottom:6px;
  font-weight:720; */
}

.section-title p {
  color:var(--hp-text-sub);
  /* font-size:1rem; */
  margin:0;
}

/* ======================================================
   RESET
====================================================== */
*::before,
*::after{ 
  box-sizing:border-box; 
}

html,body{
  margin:0;
  padding:0;  
}

body{
  font-family:'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               sans-serif;
  background:radial-gradient(circle at top,#f2f4ff,#e1e7ff 48%,#dae2ff 100%);
  color:var(--hp-text-main);
}

/* ======================================================
   TOPBAR
====================================================== */
.topbar{
  position:relative;
  z-index:10000;
  background:#050f3a;
  color:#e3e8ff;
  font-size:12px;
}

.topbar-inner{
  max-width:1440px;
  margin:0 auto;
  padding:6px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar-tagline strong{color:#4fe2ff;}
.topbar-left{display:flex;align-items:center;gap:8px;}
.topbar-right{display:flex;align-items:center;gap:12px;}
/* ======================================================
   NAV – GLOBAL (DESKTOP + MOBILE)
====================================================== */
.nav{
  position: sticky;
  top: 0;
  z-index: 9000;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom,rgba(239,244,255,.96),rgba(239,244,255,.72));
  border-bottom: 1px solid rgba(120,140,255,.18);
}

.nav-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ======================================================
   MENU – DESKTOP
====================================================== */
.nav-menu{
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a,
.nav-link-btn{
  border: 0;
  background: none;
  font: inherit;
  color: #4a5070;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .25s,color .25s,transform .25s;
}

.nav-menu a:hover,
.nav-link-btn:hover{
  background: rgba(82,113,255,.10);
  color: #5271ff;
  transform: translateY(-1px);
}

/* ======================================================
   SUB MENU – CLICK ONLY 
====================================================== */
.has-sub{
  position: relative;
}

.nav-sub{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  list-style: none;
  box-shadow: 0 18px 40px rgba(7,13,42,.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}

/* ✅ ONLY click (.open) can open */
.has-sub.open > .nav-sub{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ======================================================
   2nd LEVEL
====================================================== */
.nav-sub-2{
  margin: 6px 0;
  padding: 0;
}

.nav-sub-2 li{
  list-style: none;
}

.nav-sub-2 a{
  display: block;
  padding: 6px 1px;
  border-radius: 10px;
}

.nav-sub-2 a:hover{
  background: rgba(82,113,255,.08);
}

/* ======================================================
   TOGGLE (HAMBURGER)
====================================================== */
.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 4px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span{
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: #303552;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width:900px){

  .nav-toggle{ display: flex; }

  .nav-menu{
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    margin-top: 10px;
    background: #fff;
    border-radius: 18px;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-shadow: 0 18px 40px rgba(7,13,42,.35);

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease;
    z-index: 99999;
  }

  .nav-menu.open{
    max-height: 2000px;
    opacity: 1;
    overflow: visible;
  }

  /* mobile sub menu */
  .nav-sub{
    position: static;
    box-shadow: none;
    opacity: 1;
    transform: none;
    display: none;
    margin-left: 14px;
    padding: 6px 0;
  }

  .has-sub.open > .nav-sub{
    display: block;
  }

  /* mobile language entry */
  .nav-lang-mobile{
    display: block;
    margin-bottom: 6px;
  }
}
/* ====== Language Switch ====== */
.lang-switch{position:relative;}

.lang-btn{
  border:1px solid rgba(255,255,255,.25);
  background:#0d1238;
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.lang-menu{
  display:none;
  position:absolute;
  top:120%;
  right:0;
  background:#0e133f;
  padding:8px;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  min-width:160px;
  z-index:999999;
}

.lang-menu.open{display:block;}

.lang-menu button{
  width:100%;
  border:0;
  background:none;
  color:#d3d9ff;
  text-align:left;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.lang-menu button:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* ======================================================
   MAIN / SECTION
====================================================== */
main{
  max-width:1440px;
  margin:0 auto;
  padding:32px 32px 80px;
}

.section{
  margin-top:80px;
}

.section-header h2{
  font-size:22px;
  margin:0 0 4px;
}

.section-header p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* ======================================================
   GLOBAL REVEAL
====================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 480ms ease-out,transform 480ms ease-out;
  will-change:opacity,transform;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-delay-1{transition-delay:120ms;}
.reveal-delay-2{transition-delay:220ms;}
.reveal-delay-3{transition-delay:320ms;}

/* =========================================================
   Glass Card
========================================================= */
.glass-card {
  padding:28px 24px;
  border-radius:var(--hp-radius);
  background:var(--hp-card-bg);
  border:1px solid var(--hp-card-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 22px 60px var(--hp-glow),
    inset 0 0 28px rgba(255,255,255,0.45);
  transition:0.35s ease;
  animation:cardFloat 8s ease-in-out infinite;
}

.glass-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:
    0 32px 75px rgba(120,130,255,0.38),
    inset 0 0 34px rgba(255,255,255,0.62);
}

@keyframes cardFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}

.card-icon {
  font-size:2rem;
  margin-bottom:16px;
  color:#6e7ff5;
}

/* ======================================================
   HERO Vision Pro
====================================================== */
.hero-smart{
  position:relative;
  overflow:hidden;
  padding:72px clamp(20px,6vw,80px) 88px;
}
.hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-cloud{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 0 0,rgba(255,255,255,.85) 0,transparent 55%),
    radial-gradient(circle at 80% 0,rgba(171,188,255,.6) 0,transparent 60%),
    radial-gradient(circle at 0 100%,rgba(205,222,255,.65) 0,transparent 65%);
  opacity:.9;
}
.hero-cloud.cloud-2{
  inset:-10%;
  filter:blur(18px);
  opacity:.6;
}
.hero-beam{
  position:absolute;
  inset:0;
  mix-blend-mode:screen;
}
.hero-shell{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.05fr);
  gap:40px;
  align-items:center;
}
.hero-left{
  position:relative;
  z-index:2;
}
.hero-kicker{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hp-text-sub);
  margin:0 0 10px;
}
.hero-title{
  font-size:clamp(2.4rem,3vw,3rem);
  line-height:1.15;
  margin:0 0 14px;
}
.hero-title-accent{
  color:var(--hp-accent);
}
.hero-desc{
  margin:0 0 22px;
  font-size:.95rem;
  color:var(--hp-text-sub);
}
.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.pill{
  border-radius:999px;
  padding:8px 18px;
  font-size:.88rem;
  border:1px solid var(--hp-pill-border);
  background:var(--hp-pill-bg);
  box-shadow:0 8px 24px rgba(90,110,190,.18);
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:transform .18s ease-out, box-shadow .18s ease-out,
             background .18s ease-out, color .18s ease-out;
}
.pill.primary{
  background:linear-gradient(135deg,#4f7dff,#6ed5ff);
  color:#fff;
  border-color:transparent;
}
.pill:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(40,70,160,.26);
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:.8rem;
  color:#717aa2;
}
.hero-tags .tag{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(248,250,255,.95);
  border:1px solid rgba(200,210,250,.55);
}

/* HERO right card */
.hero-right{
  display:flex;
  justify-content:center;
  position:relative;
  z-index:2;
}
.orbit-card{
  position:relative;
  width:100%;
  max-width:430px;
  aspect-ratio:4/5;
  border-radius:var(--hp-radius-xl);
  background:radial-gradient(circle at 20% 0,#fefeff 0,#edf2ff 50%,#dde6ff 100%);
  box-shadow:
    0 26px 80px rgba(40,60,130,.35),
    0 0 0 1px rgba(255,255,255,.8);
  overflow:hidden;
}
.orbit-bg-grid{
  position:absolute;
  inset:-60px;
  background-image:
    radial-gradient(circle at 10% 0,rgba(255,255,255,.9) 0,transparent 55%),
    radial-gradient(circle at 80% 100%,rgba(159,180,255,.4) 0,transparent 70%),
    repeating-linear-gradient(
      135deg,
      rgba(165,183,255,.15) 0,
      rgba(165,183,255,.15) 1px,
      transparent 1px,
      transparent 10px
    );
  opacity:.9;
  mix-blend-mode:screen;
}
.orbit-beam{
  position:absolute;
  inset:8%;
  border-radius:32px;
  pointer-events:none;
  background:
    conic-gradient(from 210deg,
      transparent 0,
      rgba(133,187,255,.13) 4%,
      rgba(111,243,255,.45) 9%,
      rgba(133,187,255,.08) 16%,
      transparent 25%,
      transparent 100%);
  mix-blend-mode:screen;
  opacity:.8;
  animation:orbitBeamSweep 22s linear infinite;
}
.orbit-beam-2{
  inset:18%;
  filter:blur(4px);
  opacity:.5;
  animation-duration:32s;
  animation-direction:reverse;
}
@keyframes orbitBeamSweep{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.orbit-stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  touch-action:none;
}
.orbit-stage:active{
  cursor:grabbing;
}
.orbit-sphere{
  position:relative;
  width:230px;
  height:230px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 18%,#ffffff 0,#f7f9ff 35%,#bccbff 70%,#8e9fff 100%);
  box-shadow:
    0 28px 80px rgba(40,60,140,.45),
    inset 0 0 28px rgba(255,255,255,1);
}
.orbit-sphere-inner{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 15%,#ffffff 0,#f4f7ff 40%,#c2d0ff 100%);
  box-shadow:
    0 18px 40px rgba(45,70,150,.35),
    inset 0 0 22px rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
}
.orbit-core-label{
  text-align:center;
  z-index:2;
}
.core-title{
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.02em;
  margin-bottom:4px;
}
.core-sub{
  font-size:.8rem;
  color:var(--hp-text-sub);
}
/* 水波紋 */
.wave{
  position:absolute;
  inset:18%;
  border-radius:50%;
  border:1px solid rgba(159,180,255,.6);
  box-shadow:0 0 18px rgba(159,180,255,.9);
  opacity:0;
  mix-blend-mode:screen;
  animation:wavePulse 5.5s ease-out infinite;
}
.wave-2{animation-delay:1.4s;}
.wave-3{animation-delay:2.8s;}
@keyframes wavePulse{
  0%{transform:scale(.7);opacity:.6;}
  70%{transform:scale(1.25);opacity:0;}
  100%{transform:scale(1.5);opacity:0;}
}

/* 節點 pill，由 JS 計算位置 */
.orbit-layer{
  position:absolute;
  inset:0;
}
.orbit-node{
  position:absolute;
  border:none;
  padding:7px 14px;
  border-radius:999px;
  font-size:.8rem;
  background:radial-gradient(circle at 30% 10%,#ffffff 0,#f8fbff 40%,#cfe0ff 100%);
  color:var(--hp-text-main);
  box-shadow:
    0 12px 32px rgba(70,100,180,.35),
    0 0 0 1px rgba(255,255,255,.9);
  transform:translate(-50%,-50%);
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
  transition:box-shadow .18s ease-out, transform .18s ease-out,
             background .18s ease-out;
}
.orbit-node:hover{
  box-shadow:
    0 16px 38px rgba(40,70,150,.4),
    0 0 0 1px rgba(127,196,255,.9);
}

/* 粒子 */
.particle-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.particle{
  position:absolute;
  width:2.5px;
  height:2.5px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 12px rgba(255,255,255,.9);
  opacity:0;
  animation:particleRise linear infinite;
}
@keyframes particleRise{
  0%{transform:translate3d(0,12px,0);opacity:0;}
  10%{opacity:.7;}
  80%{opacity:.7;}
  100%{transform:translate3d(0,-42px,0);opacity:0;}
}

/* ============================================
   SECTION 2 – Future Tech About Cards
============================================ */
.section-about-future{
  padding:120px 0;
  position:relative;
  background:linear-gradient(180deg,#eef3ff,#e7ecff);
  overflow:hidden;
}

.future-grid{
  max-width:1180px;
  margin:50px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

.future-card{
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:26px;
  padding:32px 24px;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:.45s ease;
  box-shadow:0 20px 50px rgba(40,60,130,0.1);
}

.future-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(40,60,150,0.2);
  border-color:rgba(130,170,255,0.65);
}

/* ---------------- Hexagon Icon Block ---------------- */
.fx-hex{
  width:82px;
  height:82px;
  position:relative;
  margin-bottom:16px;
}

.hex-inner{
  width:100%;
  height:100%;
  background:linear-gradient(145deg,#6bb8ff,#92d5ff);
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  position:relative;
  z-index:2;
}

/* Soft glow behind */
.hex-glow{
  position:absolute;
  inset:-12px;
  background:radial-gradient(circle,#a8d8ff 0%, rgba(255,255,255,0) 70%);
  filter:blur(16px);
  border-radius:20px;
  z-index:1;
  opacity:.6;
}

/* ---------------- Orbit neural lines ---------------- */
.orbit-lines{
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  background:
      conic-gradient(
        from 0deg,
        rgba(135,195,255,.28),
        transparent 45%,
        rgba(135,195,255,.38),
        transparent 70%,
        rgba(165,215,255,.35)
      );
  animation:orbit-rotate 4.5s linear infinite;
  opacity:.65;
  filter:blur(8px);
}

@keyframes orbit-rotate{
  to{ transform:rotate(360deg); }
}

/* ============================================
   SECTION 2 – Diamond Fragment Glass UI 
============================================ */

.section-diamond-clean{
  padding:140px 0;
  background:#edf1ff;
}

.diamond-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

/* ---- Base Card ---- */
.diamond-card-clean{
  position:relative;
  padding:42px 32px;
  background:rgba(255,255,255,0.42);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:22px;
  box-shadow:
    0 18px 40px rgba(140,160,210,.18),
    inset 0 0 0.8px rgba(255,255,255,.8);
  overflow:hidden;
  transition:.35s ease;
}
/* 內容在碎片上方 */
.diamond-card-clean > *:not(.facet){
  position:relative;
  z-index:2;
}

.diamond-card-clean:hover{
  transform:translateY(-8px);
  box-shadow:
    0 26px 60px rgba(110,140,200,.28),
    inset 0 0 1px rgba(255,255,255,1);
}

/* ---- Facet Layers ---- */
.facet{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  z-index:1;
}

/* 左側斜切碎片 */
.facet-1{
  background:linear-gradient(135deg,
    rgba(255,255,255,.7) 0%,
    rgba(255,255,255,0) 55%);
  clip-path:polygon(0 0, 70% 0, 40% 100%, 0% 100%);
  animation:facetFloat1 10s ease-in-out infinite alternate;
}

/* 右側斜切碎片 */
.facet-2{
  background:linear-gradient(315deg,
    rgba(187,209,255,.55) 0%,
    rgba(255,255,255,0) 65%);
  clip-path:polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
  animation:facetFloat2 13s ease-in-out infinite alternate;
}

/* 上緣亮邊 */
.facet-3{
  background:linear-gradient(to bottom,
    rgba(255,255,255,.8),
    rgba(255,255,255,0));
  height:55px;
}

/* ---- 慢速精品反射 highlight 掃光 ---- */
.facet-highlight{
  width:140%;
  height:180%;
  top:-40%;
  left:-20%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.7) 35%,
    rgba(210,230,255,0.35) 50%,
    rgba(255,255,255,0) 70%
  );
  mix-blend-mode:screen;
  opacity:0.22;
  transform:rotate(18deg) translateX(-120%);
  animation:highlightSweep 15s linear infinite;
}

/* ------------- 4-layer Diamond Fragments ------------- */
.diamond-frag{
  position:absolute;
  inset:0;
  mix-blend-mode:overlay;
  opacity:.55;
  pointer-events:none;
}

/* irregular diamond cuts */
.f1{
  background:linear-gradient(135deg,
    rgba(255,255,255,.55), rgba(190,210,255,.15));
  clip-path:polygon(0 0, 85% 0, 100% 35%, 65% 100%, 0 85%);
  animation:fragFloat1 9s ease-in-out infinite alternate;
}
.f2{
  background:linear-gradient(135deg,
    rgba(180,200,255,.18), rgba(255,255,255,.12));
  clip-path:polygon(20% 0, 100% 15%, 90% 100%, 20% 100%, 0 40%);
  animation:fragFloat2 13s ease-in-out infinite alternate;
}
.f3{
  background:linear-gradient(135deg,
    rgba(255,255,255,.18), rgba(210,245,255,.25));
  clip-path:polygon(0 25%, 70% 0, 100% 75%, 35% 100%, 0 80%);
  animation:fragFloat3 16s ease-in-out infinite alternate;
}
.f4{
  background:radial-gradient(circle at 40% 20%,
    rgba(255,255,255,.6), rgba(180,210,255,.1));
  clip-path:polygon(15% 15%, 85% 10%, 100% 85%, 20% 100%);
  animation:fragFloat4 11s ease-in-out infinite alternate;
}

/* animations */
@keyframes fragFloat1{
  0%{ transform:translate(-8px,-5px); opacity:.7; }
  100%{ transform:translate(10px,8px); opacity:1; }
}
@keyframes fragFloat2{
  0%{ transform:translate(6px,2px); opacity:.6; }
  100%{ transform:translate(-6px,-3px); opacity:.9; }
}
@keyframes fragFloat3{
  0%{ transform:translate(-3px,4px); opacity:.55; }
  100%{ transform:translate(4px,-6px); opacity:.85; }
}
@keyframes fragFloat4{
  0%{ transform:translate(2px,-2px); opacity:.45; }
  100%{ transform:translate(-4px,6px); opacity:.8; }
}

/* ---- Icon ---- */
.diamond-icon-clean{
  width:56px;
  height:56px;
  background:radial-gradient(circle at 30% 20%, #ffffff, #dbeaff);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#3b52d8;
  box-shadow:
    0 0 18px rgba(120,160,255,.55),
    inset 0 0 14px rgba(255,255,255,.85);
  margin-bottom:14px;
}

/* ---- Text ---- */
.diamond-card-clean h3{
  color:#1e2d5c;
  font-size:1.2rem;
  margin-bottom:8px;
}
.diamond-card-clean p{
  color:#606b96;
  font-size:.96rem;
  line-height:1.55;
}

/* ======================================================
   Animations – breathing facets & highlight sweep
====================================================== */

/* A. 微動的碎片 */
@keyframes facetFloat1{
  0%{
    transform:translate3d(-2px,2px,0) skewX(-1deg);
    opacity:.40;
  }
  50%{
    transform:translate3d(2px,-3px,0) skewX(0deg);
    opacity:.46;
  }
  100%{
    transform:translate3d(4px,1px,0) skewX(1deg);
    opacity:.38;
  }
}

@keyframes facetFloat2{
  0%{
    transform:translate3d(3px,-1px,0) skewX(1deg);
    opacity:.36;
  }
  50%{
    transform:translate3d(-1px,3px,0) skewX(-1deg);
    opacity:.44;
  }
  100%{
    transform:translate3d(-4px,0,0) skewX(0deg);
    opacity:.4;
  }
}

/* C. 慢速反射 highlight 掃光 */
@keyframes highlightSweep{
  0%{
    transform:rotate(18deg) translateX(-120%);
    opacity:0;
  }
  8%{
    opacity:.25;
  }
  40%{
    opacity:.22;
  }
  70%{
    opacity:.18;
  }
  100%{
    transform:rotate(18deg) translateX(120%);
    opacity:0;
  }
}

/* ---------------- Glass ---------------- */
.hp-section-glass{
  position:relative;
}
.about-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.glass-card{
  position:relative;
  padding:22px 20px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(238,244,255,.98));
  border:1px solid var(--hp-card-border);
  box-shadow:0 20px 50px rgba(30,50,110,.12);
  overflow:hidden;
  transform:translateY(8px);
  opacity:0;
  transition:transform .55s cubic-bezier(.16,.75,.25,1),
             opacity .55s ease-out;
}
.glass-card.is-visible{
  transform:translateY(0);
  opacity:1;
}
.card-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(135deg,#4f7dff,#7de1ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.glass-card h3{
  margin:0 0 6px;
  font-size:1.05rem;
}
.glass-card p{
  margin:0;
  font-size:.9rem;
  color:var(--hp-text-sub);
}

/* ================================================
   RWD – Tablet & Mobile (max-width: 768px)
================================================ */
@media (max-width: 768px){

  .diamond-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 16px;
  }

  .diamond-card-clean{
    padding: 28px 22px;
    border-radius: 18px;
  }

  .diamond-icon-clean{
    width: 48px;
    height: 48px;
    font-size: 22px;
    margin-bottom: 10px;
  }

  .diamond-card-clean h3{
    font-size: 1.05rem;
    margin-bottom: 6px;
  }

  .diamond-card-clean p{
    font-size: .9rem;
    line-height: 1.45;
  }

  /* Facet intensity reduce for mobile */
  .facet{
    opacity: .28 !important;
  }
}

/* ================================================
   RWD – Small Smartphones (max-width: 520px)
================================================ */
@media (max-width: 520px){

  .section-diamond-clean{
    padding: 90px 0 70px;
  }

  .diamond-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .diamond-card-clean{
    padding: 24px 20px;
  }

  .diamond-icon-clean{
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .diamond-card-clean h3{
    font-size: 1rem;
  }

  .diamond-card-clean p{
    font-size: .88rem;
  }

  /* 手機大幅降低碎片大小 */
  .facet-1, .facet-2, .facet-3, .facet-highlight{
    transform: scale(.75);
    opacity: .2;
  }
}

/* ======================================================
   Section 2  三 Core Tech
====================================================== */
.core-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.core-card{
  padding-top:40px;  
}

.core-card {
  opacity: 0;
  transform: translateY(20px);
}
.core-card.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: 0.7s ease-out;
}

.core-ball {
  width: 150px;
  height: 150px;
  margin: 0 auto 32px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* --- 光線追蹤玻璃球背景 --- */
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.15) 45%, transparent 70%),
    radial-gradient(circle at 20% 80%, rgba(110,140,255,0.45), rgba(110,140,255,0) 60%),
    radial-gradient(circle at 80% 30%, rgba(160,210,255,0.35), rgba(160,210,255,0) 70%),
    radial-gradient(circle at 50% 60%, rgba(200,220,255,0.55), rgba(150,170,255,0.15) 65%, rgba(80,90,140,0.18) 90%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,1), rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 70%);

  box-shadow:
    0 0 35px rgba(150,170,255,0.45),
    0 10px 35px rgba(70,80,130,0.25),
    inset 0 8px 18px rgba(255,255,255,0.45),
    inset 0 -10px 22px rgba(120,140,255,0.32);

  animation: ballRotate 18s linear infinite;
}

/* --- ICON --- */
.core-ball svg {
  width: 48px;
  height: 48px;
  stroke: rgba(255,255,255,0.95);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,1))
    drop-shadow(0 0 15px rgba(150,170,255,0.95));
  z-index: 5;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ===== Section Base ===== */
.section-core {
  padding: 120px 40px;
  text-align: center;
}
.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1b1f3b;
}

.section-title p {
  color: #5d6b9c;
  margin-top: 8px;
  margin-bottom: 50px;
}

/* --- 背景粒子與光暈 --- */
.core-particles {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.core-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 16px rgba(255, 255, 255, .9);
  opacity: 0;
  animation: coreParticle 12s linear infinite;
}

/* 10 顆粒子大致分布位置 */
.core-particles span:nth-child(1) { left: 15%; top: 30%; animation-delay: 0s; }
.core-particles span:nth-child(2) { left: 30%; top: 70%; animation-delay: 1.2s; }
.core-particles span:nth-child(3) { left: 50%; top: 20%; animation-delay: 2.4s; }
.core-particles span:nth-child(4) { left: 65%; top: 75%; animation-delay: 3.6s; }
.core-particles span:nth-child(5) { left: 80%; top: 35%; animation-delay: 4.4s; }
.core-particles span:nth-child(6) { left: 22%; top: 55%; animation-delay: 5.6s; }
.core-particles span:nth-child(7) { left: 42%; top: 82%; animation-delay: 6.3s; }
.core-particles span:nth-child(8) { left: 58%; top: 58%; animation-delay: 7.1s; }
.core-particles span:nth-child(9) { left: 74%; top: 16%; animation-delay: 8.2s; }
.core-particles span:nth-child(10){ left: 88%; top: 62%; animation-delay: 9.4s; }

@keyframes coreParticle {
  0%   { transform: translate3d(0, 18px, 0); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .9; }
  100% { transform: translate3d(0, -40px, 0); opacity: 0; }
}

//* ===== Grid ===== */
.core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .core-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .core-grid { grid-template-columns: 1fr; }
}

/* ===== Glass Card ===== */
.glass-card {
  padding: 50px 30px 60px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(80, 120, 255, 0.15);
  transition: 0.4s;
}

.glass-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(80, 120, 255, 0.28);
}

/* =========================================================
   1) 玻璃表面反射線（Reflection Sweep）
========================================================= */
.core-ball::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -100%;
  width: 240%;
  height: 180%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.35) 45%,
    rgba(255,255,255,0.12) 55%,
    transparent 100%
  );
  transform: rotate(8deg);
  animation: reflectionMove 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 4;
}

@keyframes reflectionMove {
  0%   { transform: translateX(-80%) rotate(8deg); opacity: 0; }
  45%  { opacity: 1; }
  100% { transform: translateX(80%) rotate(8deg); opacity: 0; }
}

/* =========================================================
   2) 內部光點粒子 — 浮動粒子 Volume Particles
========================================================= */
.core-ball .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255,255,255,0.95);
  opacity: 0.9;
  animation: particleFloat 6s ease-in-out infinite;
  filter: blur(0.2px);
  mix-blend-mode: screen;
}

@keyframes particleFloat {
  0%   { transform: translateY(0px) translateX(0px); opacity: 0.7; }
  50%  { transform: translateY(-14px) translateX(6px); opacity: 1; }
  100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
}

/* 旋轉球體 */
@keyframes ballRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hover 浮起 + 光暈 */
.core-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 18px 40px rgba(130, 160, 255, 0.28),
    inset 0 0 22px rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.65);
}

/* --- 3D 旋轉圖示球體 --- */
.core-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transform-style: preserve-3d;
  animation: coreFloat 6s ease-in-out infinite alternate;
  box-shadow:
    0 14px 28px rgba(100, 120, 255, 0.45),
    inset 0 0 18px rgba(255,255,255,0.8);
}

/* 球體本身的漸層色 */
.core-icon-wrap.purple {
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #f0ddff 40%, #aa83ff 100%);
}
.core-icon-wrap.blue {
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #deebff 40%, #6a9bff 100%);
}
.core-icon-wrap.cyan {
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #ddfbff 40%, #46d7ff 100%);
}
/* 旋轉外環 */
.core-icon-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 20px rgba(190, 210, 255, .9);
  opacity: .9;
  mix-blend-mode: screen;
  animation: coreRingSpin 9s linear infinite;
}

/* 內側光暈 */
.core-icon-wrap::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255,255,255,1),
      rgba(255,255,255,0.65) 55%,
      transparent 85%);
  filter: blur(4px);
  opacity: 1;
  mix-blend-mode: screen;
  opacity: .8;
  animation: coreGlowPulse 4.6s ease-in-out infinite;
}
/* ===== 光線追蹤玻璃球＋脈衝＋神經軌道===== */
/* SECTION WRAPPER */
.section-glass-tech {
  padding: 90px 0;
  text-align: center;
}

/* TITLE */
.section-glass-tech .section-title h2 {
  font-size: 36px;
  margin-bottom: 6px;
  color: #1a1f3c;
}
.section-glass-tech .section-title p {
  color: #6b7397;
  margin-bottom: 50px;
}

/* GRID */
.tech-grid {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CARD */
.tech-card {
  width: 350px;
  padding: 40px 30px;
  border-radius: 28px;
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(22px);
  box-shadow: 0 12px 45px rgba(120,140,200,.15);
  transition: transform .4s ease, box-shadow .4s ease;
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 60px rgba(120,140,200,.30);
}

/* TITLE & TEXT */
.tech-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 32px;
  color: #171b2f;
}
.tech-card p {
  color: #5f6788;
  line-height: 1.7;
  margin-top: 12px;
}

/* ========== HIPOWER Purple + White iOS Glass Section ========== */
.hpv-section {
  position: relative;
  overflow: hidden;
  padding: 110px 24px;
  color: #171b46;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 20%, rgba(119, 105, 255, 0.22), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(139, 116, 255, 0.2), transparent 34%),
    linear-gradient(180deg, #f7f7ff 0%, #eef0ff 48%, #fbfbff 100%);
}

.hpv-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hpv-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(101, 102, 220, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 102, 220, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  opacity: 0.8;
}

.hpv-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.85;
  animation: hpvFloat 9s ease-in-out infinite;
}

.hpv-orb-1 {
  width: 380px;
  height: 380px;
  left: -140px;
  top: 80px;
  background: rgba(115, 104, 255, 0.23);
}

.hpv-orb-2 {
  width: 480px;
  height: 480px;
  right: -180px;
  top: 120px;
  background: rgba(174, 166, 255, 0.28);
  animation-delay: -3s;
}

.hpv-orb-3 {
  width: 320px;
  height: 320px;
  left: 43%;
  bottom: -150px;
  background: rgba(95, 125, 255, 0.18);
  animation-delay: -5s;
}

.hpv-particle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(100, 103, 255, 0.55);
  box-shadow: 0 0 18px rgba(100, 103, 255, 0.65);
  animation: hpvParticle 7s ease-in-out infinite;
}

.hpv-particle.p1 { left: 12%; top: 28%; }
.hpv-particle.p2 { right: 18%; top: 18%; animation-delay: -2s; }
.hpv-particle.p3 { left: 78%; bottom: 32%; animation-delay: -4s; }

.hpv-container {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.hpv-header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 42px;
}

.hpv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  margin-bottom: 18px;
  border-radius: 999px;
  color: #5d63e8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 44px rgba(89, 92, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.hpv-header h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: #15183f;
}

.hpv-header h2 span {
  display: block;
  margin-top: 10px;
  background: linear-gradient(90deg, #4a4fe5 0%, #7b6cff 46%, #2c315e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpv-header p {
  max-width: 1200px;
  margin: 22px auto 0;
  color: rgba(28, 31, 78, 0.68);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 550;
}

.hpv-control-shell {
  position: relative;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 22px;
  padding: 22px;
  margin-bottom: 24px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.34)),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(109, 111, 255, 0.16), transparent 36%);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: 0 34px 90px rgba(76, 80, 190, 0.16), inset 0 1px 0 rgba(255,255,255,0.95);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
}

.hpv-control-tabs {
  display: grid;
  gap: 13px;
}

.hpv-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.82);
  outline: none;
  cursor: pointer;
  min-height: 74px;
  padding: 0 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(23, 27, 70, 0.72);
  font-size: 16px;
  font-weight: 900;
  background: rgba(255,255,255,0.44);
  box-shadow: 0 18px 42px rgba(71, 78, 180, 0.09), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: 0.28s ease;
}

.hpv-tab i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #6b6fff;
  background: rgba(110, 113, 255, 0.12);
}

.hpv-tab:hover {
  transform: translateX(5px);
  color: #25285c;
  background: rgba(255,255,255,0.65);
}

.hpv-tab.is-active {
  color: #171b46;
  background: rgba(255,255,255,0.78);
  border-color: rgba(125, 130, 255, 0.52);
  box-shadow: 0 20px 48px rgba(89, 92, 220, 0.18), inset 0 1px 0 rgba(255,255,255,0.95);
}

.hpv-tab.is-active i {
  color: #fff;
  background: linear-gradient(135deg, #6b70ff, #8d7bff);
  box-shadow: 0 12px 28px rgba(107, 112, 255, 0.28);
}

.hpv-feature-stage {
  position: relative;
  min-height: 410px;
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 12%, rgba(118, 122, 255, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.38));
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 24px 70px rgba(70, 75, 180, 0.13), inset 0 1px 0 rgba(255,255,255,0.95);
  overflow: hidden;
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  transition: transform 0.28s ease;
}

.hpv-feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94, 98, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 98, 220, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 70% 42%, black 0%, transparent 68%);
}

.hpv-stage-top,
.hpv-feature-stage p,
.hpv-stage-tags,
.hpv-service-bar {
  position: relative;
  z-index: 1;
}

.hpv-stage-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hpv-stage-icon {
  width: 76px;
  height: 76px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 30px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,0.44), transparent 34%), linear-gradient(135deg, #666bff, #927cff);
  box-shadow: 0 22px 54px rgba(100, 105, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.42);
}

.hpv-stage-label {
  display: block;
  margin-bottom: 7px;
  color: #6b70ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hpv-stage-top h3 {
  margin: 0;
  color: #161a45;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.hpv-feature-stage p {
  max-width: 760px;
  margin: 26px 0 0;
  color: rgba(24, 28, 72, 0.68);
  font-size: 17px;
  line-height: 1.9;
  font-weight: 550;
}

.hpv-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hpv-stage-tags span {
  padding: 10px 14px;
  border-radius: 999px;
  color: #5155d8;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 12px 28px rgba(84, 89, 210, 0.09);
}

.hpv-service-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: stretch;
  margin-top: 42px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 16px 42px rgba(82, 87, 205, 0.08);
}

.hpv-service-item {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.72);
}

.hpv-service-item small {
  display: block;
  margin-bottom: 8px;
  color: rgba(72, 76, 180, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hpv-service-item strong {
  color: #222653;
  font-size: 15px;
  font-weight: 950;
}

.hpv-service-action {
  display: flex;
  align-items: stretch;
}

.hpv-service-action a,
.hpv-card a {
  text-decoration: none;
}

.hpv-service-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 148px;
  padding: 0 20px;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  background: linear-gradient(135deg, #5f65ff, #8d7cff);
  box-shadow: 0 18px 42px rgba(98, 104, 255, 0.25);
  transition: 0.28s ease;
}

.hpv-service-action a:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(98, 104, 255, 0.32);
}

.hpv-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.hpv-card {
  position: relative;
  min-height: 305px;
  padding: 26px 22px 24px;
  border-radius: 28px;
  cursor: pointer;
  background:
    radial-gradient(circle at var(--mx, 70%) var(--my, 12%), rgba(111, 116, 255, 0.14), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,0.68), rgba(255,255,255,0.36));
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 24px 58px rgba(75, 80, 180, 0.12), inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(1.24);
  -webkit-backdrop-filter: blur(24px) saturate(1.24);
  overflow: hidden;
  transition: 0.34s ease;
}

.hpv-card:hover,
.hpv-card.is-active {
  transform: translateY(-8px);
  border-color: rgba(116, 121, 255, 0.5);
  box-shadow: 0 32px 76px rgba(82, 87, 205, 0.18), inset 0 1px 0 rgba(255,255,255,0.96);
}

.hpv-card-num {
  position: absolute;
  top: 17px;
  right: 20px;
  color: rgba(91, 96, 220, 0.13);
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.hpv-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 23px;
  background: linear-gradient(135deg, #6268ff, #8d7cff);
  box-shadow: 0 18px 38px rgba(100, 105, 255, 0.24);
}

.hpv-card h3 {
  margin: 0 0 12px;
  color: #181b46;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 950;
}

.hpv-card p {
  margin: 0;
  color: rgba(27, 31, 78, 0.66);
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 560;
}

.hpv-card a {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #575ce6;
  font-size: 13px;
  font-weight: 950;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.82);
  transition: 0.25s ease;
}

.hpv-card a:hover {
  color: #fff;
  background: linear-gradient(135deg, #6268ff, #8d7cff);
}

.hpv-metric-panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  margin-top: 24px;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 28px 78px rgba(76, 81, 192, 0.14), inset 0 1px 0 rgba(255,255,255,0.94);
  backdrop-filter: blur(26px) saturate(1.24);
  -webkit-backdrop-filter: blur(26px) saturate(1.24);
}

.hpv-metric-title {
  min-height: 118px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
  background: linear-gradient(135deg, #303573, #686dff 58%, #8f7dff);
  box-shadow: 0 22px 54px rgba(98, 104, 255, 0.24);
}

.hpv-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.hpv-metric-item {
  min-height: 118px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.76), rgba(255,255,255,0.42));
  border: 1px solid rgba(255,255,255,0.78);
}

.hpv-metric-item strong {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 950;
  background: linear-gradient(90deg, #4e54e8, #8d7cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpv-metric-item strong.plus::after {
  content: "+";
}

.hpv-metric-item strong.percent::after {
  content: "%+";
}

.hpv-metric-item span {
  color: rgba(27, 31, 78, 0.64);
  font-size: 13px;
  font-weight: 900;
}

.hpv-cta {
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 16px 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(90deg, #252a62, #656bff 58%, #927dff);
  box-shadow: 0 24px 58px rgba(95, 101, 245, 0.26);
}

.hpv-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.78s ease, transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.hpv-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes hpvFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -20px, 0) scale(1.06); }
}

@keyframes hpvParticle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
  50% { transform: translateY(-18px) scale(1.25); opacity: 0.9; }
}

@media (max-width: 1180px) {
  .hpv-control-shell {
    grid-template-columns: 1fr;
  }

  .hpv-control-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hpv-tab {
    justify-content: center;
    flex-direction: column;
    min-height: 92px;
    padding: 14px 10px;
    text-align: center;
  }

  .hpv-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hpv-card:last-child {
    grid-column: 1 / -1;
  }

  .hpv-metric-panel {
    grid-template-columns: 1fr;
  }

  .hpv-service-bar {
    grid-template-columns: 1fr 1fr;
  }

  .hpv-service-action a {
    min-height: 56px;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .hpv-section {
    padding: 82px 16px;
  }

  .hpv-control-tabs,
  .hpv-card-grid,
  .hpv-service-bar {
    grid-template-columns: 1fr;
  }

  .hpv-tab {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 64px;
  }

  .hpv-feature-stage {
    padding: 24px;
    min-height: auto;
  }

  .hpv-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hpv-cta {
    border-radius: 24px;
    font-size: 15px;
    line-height: 1.7;
  }
}

@media (max-width: 460px) {
  .hpv-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   SPHERE — 玻璃球系統
=========================================================== */
.tech-sphere {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

/* 玻璃內核 */
.sphere-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff, #eef2ff 40%, #dbe4ff 70%, #c6d4ff 100%);
  box-shadow:
    inset 0 -30px 60px rgba(255,255,255,0.85),
    inset 0 20px 40px rgba(160,180,255,0.40),
    0 15px 45px rgba(140,160,220,0.25);
}

/* ICON */
.sphere-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 28px;
  color: linear-gradient(135deg, #4f7dff, #6ed5ff);
  text-shadow: 0 0 15px rgba(255,255,255,.8);
}

/* ======================================
   能量脈衝波
====================================== */
.pulse {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(150,180,255,0.9);
  animation: pulseWave 6s ease-out infinite;
  opacity: 0;
}
.pulse-2 { animation-delay: 1s; }
.pulse-3 { animation-delay: 2s; }

@keyframes pulseWave {
  0%   { transform: scale(.6); opacity: .55; }
  50%  { opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

/* 玻璃反射線 */
.reflect-sweep{
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(60deg,
      transparent 0%,
      rgba(255,255,255,0.55) 40%,
      rgba(255,255,255,0.1) 60%,
      transparent 100%);
  transform:rotate(0deg);
  animation:reflectMove 6s linear infinite;
}

@keyframes reflectMove{
  from{ transform:translateX(-60%) rotate(25deg); }
  to{ transform:translateX(60%) rotate(25deg); }
}

/* 浮動粒子 */
.float-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.float-particles::before,
.float-particles::after{
  content:"";
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 10px rgba(255,255,255,.7);
  animation:floatUp 4s infinite linear;
}
.float-particles::after{
  left:70%; top:80%;
  animation-duration:6s;
}

@keyframes floatUp{
  0%{ transform:translateY(20px); opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ transform:translateY(-40px); opacity:0; }
}

/* ===========================
   AI NEURAL ORBIT
=========================== */
.neural-orbit {
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  animation: orbitRotate 12s linear infinite;
}

.neuron {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #dfe6ff 0%, #9eb5ff 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(150,180,255,1);
  animation: neuronBlink 3s ease-in-out infinite alternate;
}

/* 5顆粒子分布 */
.neuron:nth-child(1){top:10%; left:50%;}
.neuron:nth-child(2){top:70%; left:5%;}
.neuron:nth-child(3){top:30%; left:90%;}
.neuron:nth-child(4){top:85%; left:40%;}
.neuron:nth-child(5){top:50%; left:95%;}

@keyframes orbitRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes neuronBlink {
  0% { opacity:.4; transform:scale(.85); }
  100% { opacity:1; transform:scale(1.25); }
}

/* ===== Text ===== */
.core-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #222644;
}

.core-card p {
  line-height: 1.7;
  color: #4b5779;
  max-width: 300px;
  margin: 0 auto;
}

/* --- Animations --- */

@keyframes coreFloat {
  0%   { transform: translate3d(0, 6px, 0); }
  100% { transform: translate3d(0, -6px, 10px); }
}

@keyframes coreRingSpin {
  from { transform: rotate3d(0.2, 0.8, 0.1, 0deg); }
  to   { transform: rotate3d(0.2, 0.8, 0.1, 360deg); }
}

@keyframes coreGlowPulse {
  0%, 100% { opacity: .5; transform: scale(0.9); }
  50%      { opacity: 1;  transform: scale(1.02); }
}

@keyframes coreIconSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* RWD 調整 */

@media (max-width: 960px){
  .section-core {
    padding: 70px 18px 80px;
  }
}

@media (max-width: 640px){
  .core-card {
    padding: 32px 20px 26px;
  }
  .core-icon-wrap {
    width: 80px;
    height: 80px;
  }
}

/* ======================================================
   SECTION 4 – Diamond Timeline
====================================================== */
/* ===== Section Wrapper ===== */
.timeline-section{
  padding: 50px 0;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
  background:linear-gradient(180deg,#e8edff,#f2f4ff);
  position: relative;
  z-index: 1;
  overflow: visible;  
}

/* ===== Timeline Core Wrapper ===== */
.timeline{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  padding:80px 0;
}

/* Central Neural Line（雙向資料流） */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:100%;
  background:
    linear-gradient(to bottom,
      rgba(75,120,255,.1),
      rgba(90,140,255,.6),
      rgba(160,200,255,.15)
    );
  border-radius:20px;
  z-index:1;
}

/* 流光向下 */
.timeline::after{
  content:"";
  position:absolute;
  left:50%;
  width:6px;
  height:120px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,#fff,rgba(255,255,255,0));
  filter:blur(7px);
  border-radius:20px;
  animation:beamDown 2.4s linear infinite;
  z-index:1;
}

@keyframes beamDown{
  0%{ top:-180px; opacity:.9; }
  100%{ top:100%; opacity:0; }
}

/* 電流逆流 B（向上） */
.timeline .beam-up{
  content:"";
  position:absolute;
  left:50%;
  width:6px;
  height:120px;
  transform:translateX(-50%);
  background:linear-gradient(to top,#fff,rgba(255,255,255,0));
  filter:blur(6px);
  border-radius:20px;
  animation:beamUp 3.2s linear infinite;
  z-index:1;
}

@keyframes beamUp{
  0%{ bottom:-180px; opacity:.8; }
  100%{ bottom:100%; opacity:0; }
}

/* ========================================
   Timeline Items (左右分支)
======================================== */
.timeline-item{
  width:50%;
  position:relative;
  padding:40px 0;
  z-index:5;
  display:flex;
  align-items:center;  
}

.timeline-item.visible{
  opacity:1;
  transform:translateY(0);
}

.timeline-item.left{
  padding-right:80px;
  justify-content:flex-end;
}
.timeline-item.right{
  padding-left:80px;
  margin-left:50%;
}

/* ========================================
    Floating Photo（技術玻璃蒙版）
======================================== */
.timeline-photo{
  width:230px;
  height:200px;
  border-radius:15px;
  overflow:hidden;
  margin-right:22px;
  position:relative;
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 12px 28px rgba(40,60,120,.25);  
  transition:transform .45s ease;
}

.timeline-item.right .timeline-photo{
  order:2;
  margin-right:0;
  margin-left:22px;
}

.timeline-photo:hover{
  transform:translateY(-6px) scale(1.03);
}

.timeline-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.9;
  filter:saturate(130%);
}

/* ========================================
   Card + Hover Glass Animation
======================================== */
.timeline-card{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(18px) saturate(180%);
  border-radius:22px;
  padding:22px 28px 22px 62px;
  box-shadow:0 12px 40px rgba(50,80,160,.15);
  position:relative;
  transition:all .35s ease;
}

.timeline-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 55px rgba(80,120,255,.3);
}

/* Highlight Glass Reflection */
.timeline-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  /* top:0;
  left:0;
  width:100%;
  height:100%; */
  background:linear-gradient(120deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,0) 40%
  );
  opacity:0;
  transition:opacity .5s; 
}

.timeline-card:hover::after{
  opacity:1;
}

/* ========================================
   Node Pulse Animation
======================================== */
.node-pulse{
  position:absolute;
  left:20px;
  top:20px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,#6aa0ff,#4b78ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  box-shadow:0 0 15px rgba(90,140,255,.6);
  animation:pulse 2.2s infinite ease-out;
}

@keyframes pulse{
  0%{ transform:scale(0.85); box-shadow:0 0 10px rgba(90,140,255,.4); }
  50%{ transform:scale(1.15); box-shadow:0 0 22px rgba(90,140,255,.8); }
  100%{ transform:scale(0.85); box-shadow:0 0 10px rgba(90,140,255,.4); }
}

/* 將上一段（白色 Timeline 區）底部空隙大幅縮小 */
.hp-section-timeline,
.section-timeline,
.timeline-wrapper {
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

/* ======================================================
   RWD small screens
====================================================== */
@media(max-width:900px){
  .timeline-item,
  .timeline-item.right,
  .timeline-item.left{
    width:100%;
    margin-left:0;
    padding:45px 0;
    justify-content:flex-start !important;
  }

  .timeline-card{
    padding:22px 28px 22px 70px;
  }

  .timeline-photo{
    width:150px;
    height:110px;
  }

  .timeline::before{ left:20px; }
  .timeline::after{ left:20px; }
  .timeline .beam-up{ left:20px; }
}

@media(max-width:600px){
  .timeline-photo{ width:130px; height:100px; }
  .timeline-card{ padding-left:68px; }
}

/* ======================================================
   Section 5 – Brand Rings
====================================================== */
/* Section 外距 — 精準距離 */
.section-brand{
  padding-top: 150px;  /* 讓白卡更靠近 Timeline */
  padding-bottom: 120px;
  margin-top: -40px !important;  /* 你可以調 -80 / -100 / -140 */
  background: transparent;
  position: relative;
  z-index: 200; /* 高於 Timeline */
  pointer-events: none; /* 保證不阻擋 Timeline 操作（可選） */
}

/* 容器：給足高度、避免 Glass Layout 侵入 */
.brand-center {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 380px !important; 
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 核心玻璃球 */
.brand-core {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
  top: 18%;
  left: 70%;
  transform: translate(-50%, -50%);
  z-index: 300; 
  /* 球體光暈 */
  background: radial-gradient(circle at 40% 35%,
    #ffffff,
    #dfe7ff 45%,
    #b9c8ff 80%,
    #a3b4ff 100%
  );

  /* 外層能量雲 */
  box-shadow:
    0 0 40px rgba(110,140,255,0.45),
    0 0 120px rgba(110,140,255,0.35),
    inset 0 0 40px rgba(255,255,255,0.45);

  /* 旋轉 + 脈衝 */
  animation:
    coreSpin 18s linear infinite,
    corePulse 4s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: coreFloat 5s ease-in-out infinite;
  pointer-events: auto; /* 保留內部可點擊 */
}

/* 慢速旋轉 */
@keyframes coreSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 呼吸脈衝 */
@keyframes corePulse {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.28); }
}

@keyframes coreFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* 外圈標籤 */
.brand-ring{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);  
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(200,210,255,0.55); 
  box-shadow: 0 18px 45px rgba(30,60,130,0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .35s ease, box-shadow .35s ease;
  z-index: 5;
  pointer-events: auto; /* 保留內部可點擊 */
  max-width: 760px;   
  width: fit-content;
  text-align: left;
  flex-wrap: wrap;   
  /* 3D 浮空陰影 */
  box-shadow:
    0 18px 40px rgba(40,60,130,0.12),
    inset 0 0 20px rgba(255,255,255,0.4);

  transition: transform .35s ease, box-shadow .35s ease;
}

.brand-ring::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,
    rgba(255,255,255,.4) 0%,
    rgba(255,255,255,0) 40%
  );
  opacity:0;
  transition:.45s;
  border-radius:inherit;  
}

.brand-ring:hover {
  transform: translate(-50%, -50%) translateY(-10px) scale(1.04);
  box-shadow:
    0 26px 60px rgba(60,90,180,0.22),
    inset 0 0 30px rgba(255,255,255,0.55);
}

.brand-ring:hover::after {
  opacity:0.75;
}

/* tags 允許換行 */
.ring-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ring-tags span{
  background: rgba(240,244,255,0.96);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* 正確排版：3 個環依序上下排列 */
.ring-1 {
  top: 18%;           /* AI 技術：核心球之上 */
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-2 {
  top: 48%;           /* 系統整合：正中線 */
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-3 {
  top: 83%;           /* 資料中台：在核心球下方 */
  left: 50%;
  transform: translate(-50%, -50%);
}

.hp-glass-card {
  margin-top: 16px !important;  
  margin-bottom: 16px !important;
}
/* =================================================
   📱 手機版 RWD – 最適合的排版修正版
================================================= */
@media (max-width: 767px) {

  .section-brand {
    padding-top: 60px;
    padding-bottom: 120px;
    margin-top: 0 !important;
    position: relative;
  }

  /* --- Brand Core（圓球）--- */
  .brand-core {
    width: 170px !important;
    height: 170px !important;
    position: relative !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    margin: 28px auto 40px auto !important;
    z-index: 5;
  }

  /* --- 容器高度改為自適應 --- */
  .brand-center {
    min-height: auto !important;
    padding-bottom: 60px;
  }

  /* --- 三張白卡：直向排列 + 間距統一 --- */
  .brand-ring {
    width: 92% !important;
    max-width: 420px;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto 22px auto !important;
    top: auto !important;
  }

  .ring-1,
  .ring-2,
  .ring-3 {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-bottom: 22px !important;
  }

  /* 手機版關閉光束避免干擾 */
  .beam-field,
  .beam-line {
    display: none !important;
  }
}

/* ===========================
   RWD：小平板（768–1023）
=========================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .section-brand {
    padding-top: 100px;
    margin-top: -20px !important;
  }

  .brand-center {
    min-height: 480px !important;
  }

  .brand-core {
    width: 200px;
    height: 200px;
    top: 28%;
    left: 65%;
  }

  .ring-1 { top: 20%; }
  .ring-2 { top: 45%; }
  .ring-3 { top: 75%; }
}

/* ===========================
   RWD：桌面（>=1281）
=========================== */
@media (min-width: 1281px) {
  .brand-center {
    min-height: 380px !important;
  }

  .brand-core {
    width: 240px;
    height: 240px;
    top: 18%;
    left: 70%;
  }
}
/* ===============================
   GLOW BEAM – 基礎樣式
================================*/
.beam-line {
  position: absolute;
  height: 2.5px; /* 線條厚度 */
  background: linear-gradient(
      to right,
      rgba(140,170,255,0) 0%,
      rgba(180,200,255,0.9) 40%,
      rgba(120,150,255,0.0) 100%
  );
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 10;
  opacity: .9;
}

/* 外層柔光（大光暈） */
.beam-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(12px);
  opacity: .4;
}

/* ===============================
   光點流動動畫（光束上跑動的小亮點）
================================*/
.beam-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(120,150,255,0.6) 40%, transparent 70%);
  animation: beamDotMove 3.3s linear infinite;
  filter: blur(1px);
  opacity: .9;
}

@keyframes beamDotMove {
  0%   { left: 0%; opacity: .3; transform: scale(0.6); }
  10%  { opacity: .9; transform: scale(1); }
  50%  { left: 50%; opacity: .7; }
  100% { left: 100%; opacity: 0; transform: scale(0.5); }
}

/* ===============================
   線條整體呼吸亮度
================================*/
@keyframes beamGlow {
  0%   { opacity: .55; }
  50%  { opacity: .95; }
  100% { opacity: .55; }
}

.beam-line {
  animation: beamGlow 4s ease-in-out infinite;
}
/* =========================================================
   BRAND BEAM — 強化版光束
=========================================================*/
.brand-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* 主光束 */
.beam {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(120,150,255,0) 0%,
    rgba(190,210,255,1) 45%,
    rgba(120,150,255,0.1) 100%
  );
  filter: blur(1px);
  opacity: .85;
}

/* 次光束（折射光） */
.beam::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(200,220,255,0),
    rgba(255,255,255,0.6),
    rgba(200,220,255,0)
  );
  filter: blur(14px);
  opacity:.25;
}

/* 亮點流動 */
.beam::after {
  content:"";
  position:absolute;
  top:-5px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(170,200,255,.8) 40%,transparent 70%);
  animation: beamDot 2.6s linear infinite;
  filter: blur(.8px);
}

@keyframes beamDot {
  0%   { left: 0%;   opacity:.3; transform:scale(.6); }
  25%  { opacity:1;  transform:scale(1); }
  50%  { left: 50%; opacity:.8; }
  100% { left: 100%; opacity:0; transform:scale(.5); }
}

/* 整束呼吸光 */
@keyframes beamGlow {
  0% { opacity:.55; }
  50%{ opacity:.95; }
  100%{ opacity:.55; }
}

.beam {
  animation: beamGlow 4s ease-in-out infinite;
}

/* =========================================================
   三條光束 — 位置與角度
=========================================================*/
.beam-1 {
  top: 34%;
  left: 27%;
  width: 31%;
  transform: rotate(-11deg);
}

.beam-2 {
  top: 52%;
  left: 27%;
  width: 31%;
  transform: rotate(0deg);
}

.beam-3 {
  top: 71%;
  left: 27%;
  width: 29%;
  transform: rotate(10deg);
}

/* =========================================================
   平板以下自動隱藏
=========================================================*/
@media (max-width: 1024px) {
  .brand-beams { display:none; }
}

/* =======================================
   3D Curved Data Streams 
======================================= */
.beam-field {
  position: absolute;
  top: 26%;
  left: 5%;
  width: 70%;
  height: 60%;
  pointer-events:none;
  z-index: 10;
}

.beam-svg {
  width: 100%;
  height: 100%;
}

/* 主光束外觀 */
.beam-path {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;

  /* 多層漸層光束 */
  stroke: url(#beamGradient);
  filter: drop-shadow(0 0 4px rgba(160,200,255,0.7));
  opacity: 0.9;

  animation: glowPulse 4s ease-in-out infinite;
}

/* 亮度呼吸 */
@keyframes glowPulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 1; }
  100% { opacity: 0.55; }
}

/* 亮點粒子沿曲線跑動 */
.beam-path {
  stroke-dasharray: 8 280;
  animation: beamRun 3s linear infinite, glowPulse 4s ease-in-out infinite;
}

@keyframes beamRun {
  0%   { stroke-dashoffset: 280; }
  100% { stroke-dashoffset: -280; }
}

/* ================================
   ViDA.ai 核心技術一覽表
================================ */
/* ============================
   外框
============================ */
.vida-table-section{
  padding:80px 0;
  background:linear-gradient(180deg,#edf1ff,#e6ecff);
}

.vida-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  color:#1a2754;
}

.vida-sub{
  text-align:center;
  margin-bottom:40px;
  color:#5c6a9a;
}

/* ============================
   表格 Wrapper（可橫向滑）
============================ */
.vida-table-wrapper{
  overflow-x:auto;
  padding-bottom:12px;
}

.vida-table-wrapper::-webkit-scrollbar{
  height:6px;
}

.vida-table-wrapper::-webkit-scrollbar-thumb{
  background:#9ab4ff;
  border-radius:6px;
}

/* ============================
   表格（Grid Table）
============================ */
.vida-table{
  display:grid;
  grid-template-columns:240px 280px 280px 280px 280px;
  gap:0;
  min-width:1350px;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 40px rgba(80,110,200,.2);
}

/* 表格 Cell */
.t-cell{
  padding:22px 26px;
  border-bottom:1px solid rgba(255,255,255,0.35);
  border-right:1px solid rgba(255,255,255,0.22);
  font-size:14px;
  line-height:1.65;
  background:rgba(255,255,255,0.25);
  transition:.25s;
}

/* 表頭 */
.t-head{
  font-weight:700;
  background:rgba(255,255,255,0.35);
  font-size:16px;
  color:#1b2b5a;
}

/* 左側分類欄 */
.t-left{
  font-weight:700;
  color:#23305d;
  background:rgba(255,255,255,0.42);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
}

.t-left i{
  color:#5f7dff;
  font-size:18px;
}

/* ============================
   Hover 效果
============================ */
.vida-table .t-cell:hover{
  background:rgba(255,255,255,0.55);
  transform:translateY(-2px);
  box-shadow:inset 0 0 12px rgba(130,150,255,.35);
}

.vida-table .t-left:hover{
  transform:none;
}

/* ============================
   RWD
============================ */
@media(max-width:900px){
  .vida-table{
    grid-template-columns:200px 240px 240px 240px 240px;
    min-width:1200px;
  }
}

@media(max-width:600px){
  .vida-title{font-size:26px;}
}


/* =========================================
   vida 外層 Layout
========================================= */
.vida-layout{
  max-width:1500px;
  margin:60px auto;
  display:flex;
  gap:40px;
  align-items:flex-start;
  position:relative;
  padding:0 20px;
}

/* 背景工程網格 */
.vida-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140,160,240,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,160,240,.12) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .55;
  pointer-events: none;
}

/* 淡淡光暈 */
.vida-layout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 30%, rgba(120,150,255,.13), transparent 60%);
  pointer-events: none;
}

/* =========================================
   左側分類欄（固定在畫面）
========================================= */
.vida-left{
  width:240px;
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* 單一分類卡 */
.vida-cat{
  padding:14px 20px;
  border-radius:18px;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.5);
  display:flex;
  align-items:center;
  gap:12px;
  color:#23305d;
  font-weight:600;
  box-shadow:
    0 8px 22px rgba(40,60,120,.12),
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -1px 3px rgba(80,100,160,.15);
  transition:.25s;
}

.vida-cat:hover{
  transform:translateX(6px);
  background:rgba(255,255,255,0.45);
}

/* Icon */
.vida-cat i {
  font-size: 18px;
  color: #5978ff;
}

/* 節點球 */
.node-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle,#7ea0ff,#4e6cff);
  box-shadow:0 0 12px rgba(110,150,255,.85);
}

@keyframes pulseNode {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .55; }
  100% { transform: scale(1); opacity: 1; }
}

/* Hover */
.vida-cat:hover {
  transform: translateX(6px);
  background: rgba(255,255,255,0.42);
  box-shadow:
    0 12px 30px rgba(50,70,150,.22),
    inset 0 1px 3px rgba(255,255,255,.75);
}

/* =========================================
   右側滑動軸
========================================= */
.vida-right{
  width:72%;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* 一列由四個卡片構成 */
.vida-row{
  display:flex;
  gap:26px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:10px;
}

.vida-row::-webkit-scrollbar{display:none;}

.vida-scroll {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 6px 6px 16px 6px;
  scrollbar-width: none; /* Firefox */
}
.vida-scroll::-webkit-scrollbar {
  display: none; /* Chrome */
}

/* 底部動畫軌道 */
.vida-scroll-track {
  width: 100%;
  height: 4px;
  background: #ced6ff55;
  border-radius: 30px;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}

.vida-scroll-track::after {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #8ea4ff 0%, #d7dfff 100%);
  animation: pipeline 3s linear infinite;
}

@keyframes pipeline {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* =========================================
   右側卡片（工程玻璃）
========================================= */
.vida-block{
  min-width:280px;
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.45);
  backdrop-filter:blur(18px) saturate(140%);
  padding:26px;
  border-radius:20px;
  box-shadow:
    0 14px 34px rgba(50,70,150,.15),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(50,70,140,.2);
  transition:.3s;
}

.vida-block:hover{
  transform:translateY(-8px);
  box-shadow:
    0 20px 50px rgba(80,110,200,.25),
    0 0 20px rgba(120,160,255,.42);
}

/* 底部光條 */
.vida-block::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #8fa8ff 0%, #d6ddff 60%, transparent 100%);
  border-radius: 4px;
  opacity: .6;
}

/* 標題 */
.vida-block h4{
  margin-bottom:12px;
  color:#1c2f68;
  font-size:18px;
  font-weight:700;
}

.vida-block ul{
  padding-left:16px;
  margin:0;
  line-height:1.7;
  font-size:14px;
}

.vida-block ul li {
  margin: 4px 0;
  position: relative;
}
.vida-block ul li::before {
  content: "•";
  color: #5d76ff;
  font-weight: 700;
  margin-right: 6px;
}

/* =========================================
   Scroll reveal
========================================= */
.reveal-tech {
  opacity: 0;
  transform: translateY(30px);
  transition: .9s cubic-bezier(.17,.8,.3,1);
}
.reveal-tech.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   RWD
========================================= */
@media(max-width:1100px){
  .vida-layout{
    flex-direction:column;
  }

  .vida-left{
    width:100%;
    position:relative;
    top:0;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:12px;
  }
 
  .vida-right{
    width:100%;
  }
}

@media(max-width:700px){

  .vida-left{
    grid-template-columns:1fr 1fr;
  }

  .vida-block{
    min-width:90%;
  }
}

/* ======================================================
   FOOTER
====================================================== */
.footer{
  background:#05001c;
  color:#e9edff;
  padding:26px 20px 20px;
}

/* 3 欄 Grid */
.footer-shell{
  max-width:1440px;
  margin:0 auto 10px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
  font-size:14px;
}
/* Footer link color override */
.footer a,
.footer-meta a,
.footer-links a {
  color:#a69bf7 !important;  
  text-decoration:none;
}

.footer a:hover,
.footer-meta a:hover,
.footer-links a:hover {
  color:#a69bf7 !important;   
  text-decoration:underline;  
}

/* ========== Company Column ========== */
.footer-company .footer-title{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.2;
}

.footer-logo-wrap{
  display:inline-block;
  margin:4px 0 10px;
}

.footer-logo{
  width:150px;
  height:auto;
  display:block;
}

.footer-tagline{
  font-size:12px;
  color:#9da5f5;
  margin-top:0px;
}

/* ========== Contact Column ========== */
.footer-contact p{
  margin:1px 0;             /* ← 更緊湊 */
  line-height:1.3;          /* ← 拉近行距 */
}

/* ========== Social ========== */
.footer-social{
  display:flex;
  gap:12px;
}

.footer-social a{
  width:28px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.footer-meta{
  max-width:1440px;
  margin:0 auto;
  font-size:11px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9da5f5;
}

.footer-links{
  display:flex;
  gap:11px;
}

/* ======================================================
   FOOTER – RWD
====================================================== */
@media(max-width:900px){
  .footer-shell{
    grid-template-columns:1fr;
    text-align:left;
    gap:20px;
  }

  .footer-meta{
    flex-direction:column;
    gap:6px;
    text-align:left;
  }
}


/* ======================================================
   RESPONSIVE NAV / LAYOUT
====================================================== */
@media(max-width:900px){
  .nav-toggle{display:flex;}

  .nav-menu{
    position:absolute;
    top:100%;
    right:16px;
    left:16px;
    margin-top:8px;
    padding:10px;
    border-radius:18px;
    background:#ffffff;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    box-shadow:0 18px 40px rgba(7,13,42,.35);
    max-height:0;
    overflow:hidden;
    transition:max-height 260ms ease-out;
    z-index: 99999 !important;   /* 再提升 */
  }
  .nav-menu.open{max-height:360px;}

  .has-sub .nav-sub{
    position:static;
    box-shadow:none;
    margin-top:4px;
  }

  main{
    padding:24px 16px 60px;
  }

  .hero-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .hero-copy{padding-top:10px;}

  .footer-shell{
    grid-template-columns:1fr;
  }

  .footer-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}
/* ======================================================
   RWD
====================================================== */
@media (max-width: 960px){
  .nav-inner{
    flex-wrap:wrap;
  }
  .nav-toggle{
    display:flex;
  }
  .nav-menu{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease-out;
  }
  .nav-menu.open{
    max-height:400px;
  }

  .hero-smart{
    padding:52px 18px 60px;
  }
  .hero-shell{
    grid-template-columns:1fr;
    gap:32px;
  }
  .hero-right{
    order:-1;
  }
  .orbit-card{
    max-width:360px;
    margin:0 auto;
  }
  .about-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .core-grid{
    grid-template-columns:1fr;
  }
  .footer-shell{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .section{
    padding:60px 16px;
  }
  .hero-title{
    font-size:2.1rem;
  }
  .orbit-sphere{
    width:190px;
    height:190px;
  }
  .orbit-sphere-inner{
    inset:14%;
  }
  .about-grid{
    grid-template-columns:1fr;
  }
  .brand-ring{
    position:relative;
    left:auto;
    transform:none;
    margin-top:12px;
  }
  .ring-1,.ring-2,.ring-3{
    top:auto;
    bottom:auto;
  }
  .brand-center{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
}