/* ======================================================
   ROOT
====================================================== */
:root{
  --bg:#edf2ff;
  --shell:#f7f9ff;
  --text:#10162f;
  --muted:#5c6482;
  --accent:#5271ff;
  --accent-soft:#9ab4ff;
  --card-bg:#050f3a;
  --radius-xl:32px;
  --shadow-soft:0 28px 60px rgba(15,35,95,0.25);
  --transition-fast:250ms ease-out;
  --grid-color:#dde5ff;
}

/* ======================================================
   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);
}

/* body{ min-height:100vh; } */

.page-shell{
      max-width:1280px;
      margin:0 auto;
      padding:0 24px;
    }
    
/* 通用區塊 */
.section{
  padding: 80px 20px;
}

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

.section-title h2{
  font-size: 1.9rem;
  margin: 0 0 10px;  
}

.section-title p{
  color: var(--hp-text-sub);
  margin: 0;
}

/* ======================================================
   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 (NO HOVER)
====================================================== */
.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 10px;
  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;
  }
}

/* ===========================
   語言選單
=========================== */
.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;
}

/* ================================
   6. Pointer events 修正
================================ */
.nav,
.nav-inner,
.nav-menu,
.lang-switch {
  pointer-events: auto !important;
}

/* ====== 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-header h2{
  font-size: 32px;  
  text-align: center;
  margin:0 0 10px;  
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
}

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

/* ======================================================
   SECTION HEADER – OFFICIAL STYLE
====================================================== */
.section-header--center{
  text-align:center;
  max-width:900px;
  margin:0 auto 36px;
}

.section-title-gradient{
  margin:0 0 10px;
  font-size:30px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
}

.section-title-gradient .t-dark{
  color:#0f172a; 
}

.section-title-gradient .t-accent{
  margin-left:6px;
  color: var(--accent);
  text-shadow: 0 6px 18px rgba(79, 114, 255, .45);
  background:linear-gradient(135deg,#4f7cff,#8fb3ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;  
}

.section-desc{
  font-size:15px;
  color:#5c6482;
  letter-spacing:.02em;
}

/* ======================================================
   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;}

/* =============================
   Banner Slider + Text Content
============================= */

/* Banner 外框 */
.banner-slider {
  position: relative;  
  width: 100%;
  height: 520px;
  overflow: hidden;
  z-index: 0;
}

/* 圖片 */
.banner-track {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.3s ease;
}
.banner-slide.active {
  opacity: 1;
  z-index: 3;
}

/* 遮罩 */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,40,0.65), rgba(0,0,60,0.45));
  z-index: 2;
}

/* 中央文字區 */
.banner-content {
  position: absolute;
  top: 50%; 
  left: 45%;
  transform: translate(-50%,-50%);
  z-index: 5;
  text-align: center;  
  padding: 0 20px;
}

/* 主標 — 漸層 */
.gradient-title {
  font-size: 40px;
  font-weight: 850;
  background: linear-gradient(to right, #68d3ff, #4b6bff);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}

/* 副標 */
.subtitle {
  color: #6988cb;
  font-size: 18px;
  margin-top: 12px;
  opacity: 0.9;
}

/* CTA */
.banner-btn-dark {
  margin-top: 26px;
  font-size: 18px;
  padding: 12px 32px;
  border-radius: 8px;
  color: #e5ebff;
  border: 1px solid #6f8dfc;
  display: inline-block;
  transition: all .25s ease;
  text-decoration: none;
}
.banner-btn-dark:hover {
  background: rgba(110,140,255,0.18);
  border-color: #9ab1ff;
  color: #ffffff;
}

/* 箭頭 */
.banner-prev, .banner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 32px;
  border: none;
  background: rgba(0,0,0,.3);
  color: #fff;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
}
.banner-prev:hover, .banner-next:hover {
  background: rgba(0,0,0,.55);
}
.banner-prev { left: 20px; }
.banner-next { right: 20px; }

/* RWD */
@media(max-width:768px){
  .banner-slider { height: 360px; }
  .gradient-title { font-size: 30px; }
  .subtitle { font-size: 16px; }
  .banner-btn-dark { font-size: 16px; padding: 10px 22px; }
}


/* ======================================================
   HERO
====================================================== */
.hero{
  margin-top:26px;
}

.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);
  gap:32px;
  align-items:stretch;
}

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

.hero-kicker{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7a82ff;
  margin-bottom:8px;
}

.hero-title{
  font-size:34px;
  line-height:1.25;
  margin:0 0 12px;
}

.hero-accent{
  color:var(--accent);
  text-shadow:0 6px 18px rgba(79,114,255,.45);
}

.hero-desc{
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
}

.hero-pills{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  border-radius:999px;
  border:1px solid rgba(77,102,255,.32);
  padding:7px 16px;
  font-size:14px;
  cursor:pointer;
  background:rgba(255,255,255,.8);
  color:var(--accent);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast);
}

.pill.primary{
  background:linear-gradient(120deg,#5574ff,#8aa4ff);
  color:#fff;
  box-shadow:0 12px 30px rgba(62,97,255,.5);
}

.pill:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(18,33,84,.18);
}

.hero-tags{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  font-size:14px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px dashed rgba(90,110,175,.45);
  color:#4b5380;
}

/* HERO – 3D Canvas & Visual */
.hero-visual{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  padding:16px;
  border-radius:26px;
  background:linear-gradient(145deg,#dfeaff 0%,#bcd6ff 40%,#7fb5ff 100%);
  box-shadow:0 18px 40px rgba(46,100,255,.25);
  pointer-events: none !important;   /* hero 外框不擋事件 */
}

#cityCanvas{
  position:relative;
  z-index:0;
  pointer-events: none !important;   /* 不攔截滑鼠 */
  width:100%;
  height:420px;
  display:block;
  border-radius:22px;
  background:radial-gradient(circle at 20% 0%,#a9b9f0 0%,#220a8a 55%,#0d299c 80%);
}

/* 浮在 Canvas 上的小晶片 */
.hero-overlay-chip{
  pointer-events:none;
  position:absolute;
  top:14px;
  left:18px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(9,16,45,.86);
  color:#e7ecff;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 12px 30px rgba(3,6,18,.8);
  z-index:2;
}

.chip-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#d9fffd,#42f6ff,#1b6dff);
  box-shadow:0 0 10px rgba(108,255,255,.95);
}

.hero-scroll-hint{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
  text-align:right;
}

/* HERO – RWD & mobile tuning */
@media (max-width: 960px){
  .hero-layout{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  .hero-copy{
    order:2;
    padding-top:6px;
  }
  .hero-visual{
    order:1;
    padding:12px;
    border-radius:22px;
    box-shadow:0 14px 32px rgba(46,100,255,.22);
  }
  #cityCanvas{
    height:260px;
    border-radius:18px;
  }
}

@media (max-width: 640px){
  .hero-title{
    font-size:26px;
  }
  .hero-desc{
    font-size:14px;
  }
  .hero-scroll-hint{
    font-size:12px;
  }
}

/* ===============================
   北捷 Metro AI Warning
================================ */

.ios-glass-metro-aiwarn{
  padding:96px 0;
  /* background:linear-gradient(180deg,#ffffff,#f4f7ff); */
}

.metro-aiwarn-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:center;
}

/* LEFT */
.metro-aiwarn-title{
  font-size:42px;
  line-height:1.15;
  margin-bottom:16px;
}

.metro-aiwarn-title span{
  color:#4f6cff;
}

.metro-aiwarn-desc{
  max-width:520px;
  font-size:15px;
  line-height:1.8;
  color:#4b5563;
  margin-bottom:36px;
}

.metro-aiwarn-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.metro-aiwarn-card{
  padding:22px;
  border-radius:24px;
  text-align:left;
  cursor:pointer;

  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  border:1px solid rgba(120,140,210,.25);

  box-shadow:0 14px 32px rgba(80,100,200,.15);
  transition:.35s ease;
}

.metro-aiwarn-card i{
  font-size:18px;
  color:#4f6cff;
}

.metro-aiwarn-card h4{
  margin:10px 0 6px;
  font-size:15px;
}

.metro-aiwarn-card p{
  font-size:13px;
  color:#6b7280;
  line-height:1.6;
}

.metro-aiwarn-card.active,
.metro-aiwarn-card:hover{
  background:linear-gradient(135deg,#eef2ff,#ffffff);
  box-shadow:0 22px 48px rgba(99,102,241,.35);
  transform:translateY(-2px);
}

/* RIGHT 容器 */
.metro-aiwarn-visual{
  position: relative;
  width: 100%;
}

/* RIGHT */
.metro-aiwarn-glass{
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  background:#050814;
  box-shadow:0 30px 80px rgba(40,60,140,.25);
}

/* 背景捷運照片 */
.metro-aiwarn-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:url("../img/banner/metro-aiwarn-demo.png");
  background-size:cover;
  background-position:center;

  opacity:1;
  visibility:visible;
}

/* Canvas 視覺層 */
#metroAiwarnCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  z-index: 2;
  pointer-events: none;
}

.metro-aiwarn-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* HUD DOTS */
.metro-aiwarn-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.metro-aiwarn-overlay .dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
}

.dot.red{background:#ef4444;top:32%;left:48%}
.dot.amber{background:#f59e0b;top:40%;left:62%}
.dot.green{background:#22c55e;top:54%;left:38%}

/* LOG */
.metro-ai-log{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(120,140,210,.28);
  font-size: 13px;
}

.metro-aiwarn-log{
  position:absolute;
  left:16px;
  z-index:4;
  bottom:16px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(120,140,210,.28);
  font-size:13px;
}

/* RWD */
@media (max-width:1024px){
  .metro-aiwarn-wrap{
    grid-template-columns:1fr;
    gap:56px;
  }
  .metro-aiwarn-cards{
    grid-template-columns:1fr;
  }
}


/* ===============================
   DOMAIN GLASS SECTION
================================ */
.domain-glass-section{
  padding:50px 20px;
  background:#f8fafc;
  position:relative;
}

.domain-glass-header{
  max-width:1280px;
  margin:auto;
  text-align:center;
}

.domain-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:#6366f1;
  font-weight:600;
}

.domain-title{
  font-size:40px;
  font-weight:800;
  margin-top:6px;
  color:#0f172a;
}
.domain-title span{
  color:#6366f1;
}


/* Layout */
.domain-glass-container{
  max-width:1280px;
  margin:80px auto 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
}

/* Panels */
.domain-panel{
  display:none;
  opacity:0;
  transform:translateY(12px);
}
.domain-panel.is-active{
  display:block;
  animation:panelIn .5s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes panelIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.domain-panel h3{
  font-size:26px;
  margin-bottom:12px;
}
.domain-panel p{
  color:#475569;
  line-height:1.7;
}

/* List */
.domain-list{
  min-height:72px; 
  margin-top:24px;
  list-style:none;  
  padding:18px 24px;         
  display:flex;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  gap:14px;
  border-radius:20px;
}

.domain-list li,
.domain-alert,
.metric-glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-radius:18px;
  border:1px solid var(--glass-border);
  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.domain-list li i{
  font-size:18px;
  color:var(--brand-blue);
  transition:.35s ease;
}

.domain-list li:hover i{
  transform:scale(1.15) rotate(-6deg);
  filter:drop-shadow(0 4px 10px rgba(79,110,247,.45));
}

/* hover */
.domain-list li:hover,
.domain-alert:hover,
.metric-glass:hover{
  transform:translateY(-6px);
  box-shadow:
    var(--glass-shadow),
    0 0 0 6px var(--brand-glow),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* hover */
.domain-list li:hover,
.domain-alert:hover,
.metric-glass:hover{
  transform:translateY(-6px);
  box-shadow:
    var(--glass-shadow),
    0 0 0 6px var(--brand-glow),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.domain-list li::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;

  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(79,110,247,.35),
    transparent 70%
  );

  opacity:0;
  transform:translateX(-60%);
  transition:.6s ease;
  pointer-events:none;
}

.domain-list li:hover::after{
  opacity:1;
  transform:translateX(60%);
}

/* Alerts */
.domain-alert{
  margin-top:16px;
  padding:14px 18px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.domain-alert.danger{
  background:#fff1f2;
  color:#b91c1c;
}
.domain-alert.warning{
  background:#fff7ed;
  color:#c2410c;
}

/* Metrics */
.domain-metrics{
  display:flex;
  gap:20px;
  margin-top:24px;
}

.metric-glass{
  flex:1;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px);
  border-radius:18px;
  padding:20px;
  text-align:center;
}

/* Visual */
.domain-visual-frame{
  position:relative;                 
  width:100%;
  aspect-ratio: 16 / 10;             /*  穩定比例 */

  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:20px;
  border-radius:40px;
  box-shadow:0 40px 120px rgba(0,0,0,.18);
  overflow:hidden;  
}

.domain-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:28px;

  opacity:0;
  transform:scale(1.02);
  transition:
    opacity .6s ease,
    transform .8s ease,
    filter .6s ease;
  /* filter:brightness(.95) saturate(.9); */
}
.domain-img.is-active{
  display:block;
  opacity:1;
  animation:systemBreath 3.6s ease-in-out infinite;
}

.domain-img.is-hover{
  opacity:1;
  filter:brightness(1.12) saturate(1.1);
}

/* active：常駐微呼吸 */
.domain-img.is-active{
  opacity:1;
  animation:systemBreath 3.6s ease-in-out infinite;
}

/* RWD */
@media(max-width:1024px){
  .domain-glass-container{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .domain-glass-content{
    padding-left:0;
  }

  .domain-tabs{
    flex-wrap:wrap;
    justify-content:center;
  }

  .domain-tab{
    padding:8px 16px;
    font-size:14px;
  }
}

/* 結構性留白 */
.domain-glass-content{
  padding-left:48px;   
}


.domain-tabs{
  margin-top:28px;
  display:inline-flex;
  gap:4px;
  padding:6px;

  background:rgba(255,255,255,.75);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius:999px;
  box-shadow:
    0 20px 50px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.domain-tab{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 20px;
  border:none;
  border-radius:999px;
  background:transparent;

  font-weight:600;
  color:#64748b;
  cursor:pointer;

  transition:
    background .35s cubic-bezier(.4,0,.2,1),
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

.domain-tab i{
  font-size:14px;
}

/* Active */
.domain-tab.is-active{
  background:linear-gradient(135deg,#ffffff,#eef2ff);
  color:#4338ca;

  box-shadow:
    0 10px 28px rgba(79,110,247,.25),
    inset 0 1px 0 rgba(255,255,255,.95);

  transform:translateY(-1px);
}

/* Hover */
.domain-tab:hover{
  color:#0f172a;
}

.domain-tab[data-link]::after{
  content:"↗";
  margin-left:6px;
  font-size:12px;
  opacity:.6;
}

/* Active */
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 rgba(79,110,247,0);}
  50%{ box-shadow:0 0 18px rgba(79,110,247,.25);}
}

.domain-item[data-type="thermal"]:hover{
  animation:breathe 1.6s ease infinite;
}

.domain-item[data-type="wave"]:hover{
  animation:breathe 2.4s ease infinite;
}

.domain-item[data-type="multi"]:hover{
  animation:breathe 1.2s ease infinite;
}


@keyframes systemBreath{
  0%,100%{
    filter:brightness(1) saturate(1);
  }
  50%{
    filter:brightness(1.06) saturate(1.05);
  }
}


/* ===============================
   Video eXchange Panel Section
================================ */
.vxp-head{
  max-width:1400px;
  margin:0 auto 56px;
  padding:0 32px;
  text-align:center;
}

.vxp-head:hover .vxp-eyebrow{
  transform:translateY(-2px);
  box-shadow:0 10px 40px rgba(251,146,60,.25);
  transition:.35s ease;
}

.vxp-eyebrow{
  display:inline-flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  color:#fb923c;
  font-size:13px;
  letter-spacing:.08em;
}

/* 掃描光 */
.vxp-eyebrow::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(251,146,60,.65),
    transparent
  );
  animation:eyebrowScan 3.2s linear infinite;
}

@keyframes eyebrowScan{
  to{ left:120%; }
}

.vxp-head-title{
  margin-top:18px;
  font-size:44px;
  font-weight:900;
  color:#0f172a;
  background:linear-gradient(180deg,#fff,#c7d2fe);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.vxp-stream-console{
  padding:120px 0;
  background:
    radial-gradient(800px 500px at 15% 0%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,#050b1c,#020617);
}

.vxp-shell{
  max-width:1400px;
  margin:auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:28px;
}

/* Sidebar */
.vxp-sidebar{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(26px);
  border-radius:28px;
  padding:22px;
  color:#e5e7eb;
}

.vxp-sidebar-head h3{
  font-size:15px;
  letter-spacing:.12em;
}

.vxp-status{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#1e293b;
}

.vxp-status.active{
  position: relative;
  background:#16a34a;
  color:#ecfdf5;
  overflow:hidden;
}

.vxp-status.active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(34,197,94,.6);
  animation:statusPulse 2.6s ease-out infinite;
}

@keyframes statusPulse{
  0%{ opacity:.6; transform:scale(.85); }
  70%{ opacity:0; transform:scale(1.25); }
  100%{ opacity:0; }
}

.vxp-group-title{
  margin:26px 0 10px;
  font-size:12px;
  opacity:.7;
}

.vxp-channel{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  border:none;
  background:transparent;
  color:#cbd5f5;
  cursor:pointer;
  display:flex;
  gap:10px;
}

.vxp-channel.active{
  background:#4f6ef7;
  color:#fff;
}

.vxp-output select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:none;
  margin:6px 0 14px;
}

.vxp-apply{
  width:100%;
  padding:12px;
  border-radius:14px;
  background:#1f2937;
  color:#fff;
  border:none;
}

/* Stage */
.vxp-stage{
  /* position:relative; */
  min-height:520px;
}

.vxp-video-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:520px;
  overflow:hidden;
  border-radius:32px;  
  background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}

.vxp-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:1;
  pointer-events: none;
  transition:opacity .45s ease;
}

.vxp-video.active{
  opacity:1;
  z-index:2;
  pointer-events: auto;
}

.vxp-detect,
.vxp-hud,
.vxp-controls,
.vxp-failover {
  position: absolute;
  z-index: 5; /* 一定要比 video 大 */
}

.vxp-video.active::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  animation:videoScan 1.8s ease;
  pointer-events:none;
}

@keyframes videoScan{
  from{ transform:translateX(-40%); }
  to{ transform:translateX(140%); }
}

/* HUD */
.vxp-hud{
  position:absolute;
  top:16px;
  left:18px;
  display:flex;
  gap:14px;
  align-items:center;
}

.vxp-hud,
.vxp-failover{
  pointer-events:none;
}

.vxp-rec{
  background:rgba(220,38,38,.85);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
}

/* Detect Box Base */
.vxp-detect{
  position:absolute;
  z-index:4;
  pointer-events:auto;
  border-radius:8px;
  backdrop-filter: blur(4px); 
  will-change: transform;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease,
    opacity .3s ease;
}

.vxp-info{
  color:#bfdbfe;
}

/* PERSON */
.vxp-detect[data-ai="person"]{
  border:2px solid #3b82f6;
  box-shadow:0 0 18px rgba(59,130,246,.8);
  color:#bfdbfe;  
}

/* VEHICLE */
.vxp-detect[data-ai="vehicle"]{
  border:2px solid #22c55e;
  box-shadow:0 0 18px rgba(34,197,94,.8);
  color:#bbf7d0;
}

/* DRONE */
.vxp-detect[data-ai="drone"]{
  border:2px solid #a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.8);
  color:#e9d5ff;
}

.vxp-detect.show{ 
  display:block; 
  opacity:1;
  animation: detectBreath 2.6s ease-in-out infinite;
}

@keyframes detectBreath{
  0%,100%{ box-shadow:0 0 14px currentColor; }
  50%{ box-shadow:0 0 26px currentColor; }
}

@keyframes detectPulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}

.vxp-detect::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px dashed rgba(255,255,255,.35);
  animation:scan 2.4s linear infinite;
}

@keyframes scan{
  0%{ opacity:.3 }
  50%{ opacity:.8 }
  100%{ opacity:.3 }
}

/* 偵測框提示狀態 */
.vxp-detect.is-hint{
  animation:hintPulse .6s ease;
  animation: hintFlash .6s ease;
}

@keyframes hintFlash{
  0%{ box-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 36px rgba(255,255,255,.9); }
  100%{ box-shadow:0 0 18px rgba(0,0,0,0); }
}

@keyframes hintPulse{
  0%{
    box-shadow:0 0 0 rgba(255,255,255,0);
    opacity:.85;
  }
  50%{
    box-shadow:0 0 28px currentColor;
    opacity:1;
  }
  100%{
    box-shadow:0 0 0 rgba(255,255,255,0);
    opacity:.9;
  }
}

/* Controls */
.vxp-controls{
  position:absolute;
  bottom:18px;
  right:18px;
  display:flex;
  gap:12px;
}

.vxp-controls button{
  padding:10px 12px;
  border-radius:14px;
  border:none;
  background:rgba(15,23,42,.8);
  color:#fff;
  pointer-events:auto;
}

.vxp-controls .share{
  background:#22c55e;
}

/* RWD */
@media(max-width:1024px){
  .vxp-shell{
    grid-template-columns:1fr;
  }
}
/* Popover */
.vxp-popover{
  position:absolute;
  min-width:220px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(20px);
  color:#e5e7eb;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  font-size:13px;
  z-index:20;
}

.vxp-popover h4{
  margin:0 0 8px;
  font-size:14px;
  color:#93c5fd;
}

.vxp-popover ul{
  list-style:none;
  padding:0;
  margin:0;
}

.vxp-popover li{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  opacity:.9;
}

/* Standby 狀態節點*/
.vxp-failover{
  position:absolute;
  bottom:80px;
  right:28px;
  display:flex;
  gap:10px;
}
/* LIVE 點呼吸*/
.live-dot{
  color:#fb923c;
  animation:liveBlink 1.6s infinite;
}

@keyframes liveBlink{
  0%,100%{ opacity:.3; }
  50%{ opacity:1; }
}

.vxp-failover .node{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  background:rgba(15,23,42,.75);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.12);
}

.vxp-failover .node.active{
  background:#22c55e;
  color:#052e16;
}

.vxp-failover .node.fail{
  background:#ef4444;
  color:#fff;
  animation:failPulse 1.2s infinite;
}

@keyframes failPulse{
  50%{ transform:scale(1.15); }
}

@media(max-width:1024px){
  .vxp-video-wrap{
    min-height:420px;
  }
  .vxp-stage{
    min-height:420px;
  }
}

@media(max-width:640px){
  .vxp-video-wrap{
    min-height:300px;
    border-radius:22px;
  }

  .vxp-head-title{
    font-size:32px;
  }

  .vxp-shell{
    gap:20px;
  }

  .vxp-sidebar{
    padding:18px;
  }
  .vxp-stage{
    min-height:300px;
  }
}


/* Stream icon */
.dfx-stream.is-active rect,
.dfx-stream.is-active circle,
.dfx-stream.is-active path,
.dfx-stream.is-active polygon {
  stroke: #6cf;
  fill: rgba(100,180,255,.25);
  filter: drop-shadow(0 0 8px rgba(120,200,255,.8));
}

/* Lines */
.dfx-lines line {
  stroke: rgba(255,255,255,.2);
  stroke-width: 2;
}
.dfx-lines line.is-active {
  stroke: #7dd3fc;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(125,211,252,.8));
}

/* Core pulse */
.dfx-core-outer.is-pulse {
  animation: corePulse 1.2s ease-out;
}
@keyframes corePulse {
  0%   { filter: drop-shadow(0 0 0 rgba(120,200,255,0)); }
  50%  { filter: drop-shadow(0 0 18px rgba(120,200,255,.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(120,200,255,0)); }
}

/* Popover */
.dfx-pop {
  transition: opacity .25s ease;
}

/* ======================================================
   SOLUTIONS MAP 
====================================================== */     
    .page-shell{
      width:min(1560px, calc(100% - 40px));
      margin:0 auto;
      padding:56px 0 42px;
    }

    .section-header{
      text-align:center;
      margin-bottom:24px;
      position:relative;
      z-index:2;
    }

    .section-title{
      margin:0;
      font-size:clamp(34px, 4vw, 58px);
      line-height:1.08;
      letter-spacing:-.04em;
      font-weight:800;
      color:#101828;
    }

    .section-title .accent{
      color:#8fa0ff;
    }

    .section-title .en{
      color:#9ca5c4;
      font-size:.82em;
      letter-spacing:.08em;
      font-weight:700;
    }

    .section-desc{
      width:min(980px, 100%);
      margin:14px auto 0;
      font-size:16px;
      line-height:1.85;
      color:var(--muted);
      font-weight:600;
    }

    .solutions-map{
      position:relative;
      min-height:900px;
      padding:40px;
      border-radius:54px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18)),
        radial-gradient(circle at top, #fbfcff 0%, #eef2ff 58%, #e7ecff 100%);
      border:1px solid rgba(255,255,255,.85);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 26px 90px rgba(143,157,203,.18);
      isolation:isolate;
    }

    .solutions-map::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(to right, rgba(191,200,230,.22) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(191,200,230,.22) 1px, transparent 1px);
      background-size:70px 70px;
      opacity:1;
      pointer-events:none;
      z-index:0;
    }

    .solutions-map::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 42%);
      pointer-events:none;
      z-index:0;
    }

    .ambient-glow{
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
    }

    .ambient-glow span{
      position:absolute;
      display:block;
      border-radius:999px;
      background:radial-gradient(circle, rgba(150,232,255,.78), rgba(150,232,255,.18) 60%, transparent 100%);
      filter:blur(1px);
      animation:orbFloat 5.2s ease-in-out infinite;
      opacity:.85;
    }

    .ambient-glow span:nth-child(1){width:78px;height:38px;top:31%;left:48%;animation-delay:0s}
    .ambient-glow span:nth-child(2){width:72px;height:36px;top:37%;left:67%;animation-delay:.8s}
    .ambient-glow span:nth-child(3){width:74px;height:38px;top:66%;left:73%;animation-delay:1.6s}
    .ambient-glow span:nth-child(4){width:76px;height:36px;top:48%;left:34%;animation-delay:2.2s}
    .ambient-glow span:nth-child(5){width:64px;height:32px;top:61%;left:54%;animation-delay:2.9s}

    @keyframes orbFloat{
      0%,100%{transform:translateY(0);opacity:.72}
      50%{transform:translateY(-10px);opacity:1}
    }

    /* HUD */
    .hud-panel{
      position:absolute;
      right:28px;
      top:28px;
      width:330px;
      z-index:12;
      border-radius:26px;
      padding:18px 18px 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.94);
      box-shadow:
        0 16px 40px rgba(148,160,206,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
      transition:all var(--transition);
    }

    .hud-top{
      display:flex;
      align-items:flex-start;
      gap:14px;
    }

    .hud-icon{
      width:52px;
      height:52px;
      border-radius:18px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      color:#7992ff;
      font-size:20px;
      background:linear-gradient(180deg, #f8faff, #edf2ff);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }

    .hud-meta{
      flex:1 1 auto;
      min-width:0;
    }

    .hud-live{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:#f5f8ff;
      color:#7c86b0;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .hud-live-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#72dfc5;
      box-shadow:0 0 10px rgba(114,223,197,.9);
      animation:blink 1.4s infinite;
    }

    @keyframes blink{
      0%,100%{opacity:1;transform:scale(1)}
      50%{opacity:.45;transform:scale(.7)}
    }

    .hud-title{
      margin:10px 0 0;
      font-size:20px;
      line-height:1.25;
      letter-spacing:-.02em;
      font-weight:800;
      color:#121827;
    }

    .hud-desc{
      margin:10px 0 0;
      color:#70789a;
      font-size:13px;
      line-height:1.7;
      font-weight:600;
    }

    .hud-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:16px;
    }

    .hud-stat{
      padding:12px 8px;
      border-radius:16px;
      text-align:center;
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,247,255,.75));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }

    .hud-stat .num{
      display:block;
      font-size:18px;
      font-weight:800;
      color:#111827;
      letter-spacing:-.02em;
    }

    .hud-stat .lab{
      display:block;
      margin-top:4px;
      font-size:10px;
      color:#8d96b7;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .hud-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }

    .hud-tags span{
      padding:6px 10px;
      border-radius:999px;
      background:linear-gradient(180deg, #f6f8ff, #edf1ff);
      color:#7b85b2;
      font-size:11px;
      font-weight:800;
    }

    .hud-actions{
      display:flex;
      gap:8px;
      margin-top:16px;
    }

    .hud-btn{
      appearance:none;
      border:0;
      cursor:pointer;
      border-radius:14px;
      padding:10px 12px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#6572a8;
      background:linear-gradient(180deg, #f8faff, #edf1ff);
      box-shadow:var(--shadow-md);
      transition:all var(--transition);
    }

    .hud-btn:hover{
      transform:translateY(-1px);
    }

    /* center */
    .solutions-center{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      z-index:6;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .solutions-center::before{
      content:"";
      position:absolute;
      width:440px;
      height:440px;
      border-radius:50%;
      background:
        radial-gradient(circle, rgba(255,255,255,.92), rgba(224,232,255,.28) 42%, transparent 72%);
      opacity:.92;
      animation:coreHalo 5.6s ease-in-out infinite;
      pointer-events:none;
    }

    .solutions-center::after{
      content:"";
      position:absolute;
      width:250px;
      height:250px;
      border-radius:50%;
      border:1px solid rgba(175,190,255,.28);
      animation:spin 15s linear infinite;
      pointer-events:none;
    }

    .core-orbit{
      position:absolute;
      width:312px;
      height:312px;
      border-radius:50%;
      animation:spinReverse 11s linear infinite;
      pointer-events:none;
    }

    .core-orbit i{
      position:absolute;
      left:50%;
      top:-8px;
      transform:translateX(-50%);
      font-size:14px;
      color:#8adcfb;
      text-shadow:0 0 12px rgba(138,220,251,.8);
    }

    @keyframes coreHalo{
      0%,100%{transform:scale(1);opacity:.86}
      50%{transform:scale(1.06);opacity:1}
    }

    @keyframes spin{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }

    @keyframes spinReverse{
      from{transform:rotate(360deg)}
      to{transform:rotate(0deg)}
    }

    .solutions-core{
      position:relative;
      min-width:420px;
      padding:20px 30px 17px;
      border-radius:999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,246,255,.82));
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid rgba(167,181,255,.44);
      box-shadow:
        0 18px 48px rgba(157,171,217,.22),
        inset 0 1px 0 rgba(255,255,255,.96);
      text-align:center;
      animation:corePulse 4s ease-in-out infinite;
    }

    .core-label{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-size:20px;
      font-weight:800;
      letter-spacing:-.02em;
      color:#101828;
    }

    .core-label i{
      color:#8fa0ff;
    }

    .core-sub{
      display:block;
      margin-top:6px;
      font-size:13px;
      color:#70789b;
      font-weight:600;
      letter-spacing:.03em;
    }

    .core-live{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:10px;
      padding:6px 12px;
      border-radius:999px;
      background:#f4f7ff;
      color:#7a86ac;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .core-live-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#72dfc5;
      box-shadow:0 0 12px rgba(114,223,197,.95);
      animation:blink 1.4s infinite;
    }

    @keyframes corePulse{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.025)}
    }

    /* node */
    .solutions-node{
      position:absolute;
      z-index:4;
      width:308px;
      max-width:308px;
      padding:18px 18px 16px;
      border-radius:28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,255,.76));
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.95);
      box-shadow:
        0 16px 38px rgba(152,166,210,.18),
        inset 0 1px 0 rgba(255,255,255,.94);
      transform:translate(-50%,-50%);
      transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
      cursor:pointer;
    }

    .solutions-node:hover,
    .solutions-node.is-active{
      transform:translate(-50%,-50%) scale(1.04);
      box-shadow:
        0 22px 52px rgba(152,166,210,.22),
        0 0 0 1px rgba(174,211,255,.65);
      border-color:rgba(219,232,255,.98);
    }

    .node-head{
      display:flex;
      align-items:flex-start;
      gap:12px;
    }

    .node-icon{
      width:46px;
      height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:18px;
      color:#89a0ff;
      background:linear-gradient(180deg, #f9fbff, #edf2ff);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }

    .node-title-wrap{
      flex:1 1 auto;
      min-width:0;
    }

    .node-id{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:5px 9px;
      border-radius:999px;
      background:#f5f8ff;
      color:#8d97ba;
      font-size:10px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .node-status{
      width:7px;
      height:7px;
      border-radius:50%;
      background:#72dfc5;
      box-shadow:0 0 10px rgba(114,223,197,.9);
      animation:blink 1.4s infinite;
    }

    .solutions-node h3{
      margin:10px 0 0;
      font-size:18px;
      line-height:1.28;
      font-weight:800;
      letter-spacing:-.02em;
      color:#111827;
    }

    .solutions-node p{
      margin:12px 0 12px;
      font-size:13px;
      line-height:1.65;
      color:#6e7694;
      font-weight:600;
    }

    .node-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .node-tags span{
      padding:6px 10px;
      border-radius:999px;
      background:linear-gradient(180deg, #f4f6ff, #ebefff);
      color:#7079b0;
      font-size:11px;
      font-weight:800;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }

    .node-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:12px;
    }

    .node-hint{
      color:#8f98ba;
      font-size:11px;
      font-weight:700;
      display:flex;
      align-items:center;
      gap:7px;
    }

    .node-arrow{
      width:30px;
      height:30px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#f3f7ff;
      color:#92a2de;
      font-size:12px;
    }

    .node-its      { top:16%; left:50%; }
    .node-tve      { top:37%; left:85%; }
    .node-parking  { top:72%; left:85%; }
    .node-tunnel   { top:88%; left:50%; }
    .node-campus   { top:72%; left:15%; }
    .node-harbor   { top:33%; left:15%; }

    /* SVG  */
    .solutions-lines{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:1;
      overflow:visible;
    }

    .beam-glow{
      fill:none;
      stroke:rgba(146,225,255,.24);
      stroke-width:6;
      filter:url(#softGlow);
      opacity:.32;
    }

    .beam-outer{
      fill:none;
      stroke:rgba(151,194,255,.54);
      stroke-width:1.5;
      opacity:.42;
      stroke-linecap:round;
    }

    .beam-inner{
      fill:none;
      stroke:url(#lineGrad);
      stroke-width:1.35;
      stroke-linecap:round;
      stroke-dasharray:10 22;
      filter:url(#beamGlow);
      opacity:.95;
      animation:flowMove 3s linear infinite;
    }

    .line-set.active .beam-inner{
      stroke-width:2.2;
      animation-duration:1.45s;
      opacity:1;
    }

    .line-set.active .beam-outer{
      opacity:.76;
    }

    .line-set.active .beam-glow{
      opacity:.75;
    }

    @keyframes flowMove{
      from{stroke-dashoffset:0}
      to{stroke-dashoffset:-60}
    }

    .pulse-dot{
      fill:#9cecff;
      filter:drop-shadow(0 0 10px rgba(120,221,255,.95));
      offset-distance:0%;
      animation:moveDot 3.4s linear infinite;
    }

    .line-set.active .pulse-dot{
      animation-duration:1.55s;
    }

    @keyframes moveDot{
      0%{offset-distance:0%;opacity:0;transform:scale(.45)}
      10%{opacity:1;transform:scale(1)}
      88%{opacity:1}
      100%{offset-distance:100%;opacity:0;transform:scale(.55)}
    }

    /* 展示控制 */
    .demo-controls{
      position:absolute;
      left:28px;
      bottom:28px;
      z-index:9;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .demo-chip{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:11px 15px;
      border-radius:999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,255,.68));
      border:1px solid rgba(255,255,255,.94);
      color:#7b86ac;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:var(--shadow-md);
    }

    .demo-chip .tiny-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#72dfc5;
      box-shadow:0 0 10px rgba(114,223,197,.95);
      animation:blink 1.4s infinite;
    }

    .demo-btn{
      appearance:none;
      border:0;
      cursor:pointer;
      padding:11px 14px;
      border-radius:999px;
      background:linear-gradient(180deg, #f8faff, #edf1ff);
      color:#6976a9;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:var(--shadow-md);
      transition:all var(--transition);
    }

    .demo-btn:hover{
      transform:translateY(-1px);
    }

    @media (min-width: 1400px){
      .node-tve{
        left:82.5%;
        top:38%;
      }
      .node-parking{
        left:82.5%;
      }
    }

    @media (max-width: 1280px){
      .hud-panel{width:300px}
      .solutions-node{width:286px;max-width:286px}
      .node-tve{left:83%; top:38%;}
      .node-parking{left:83%;}
    }

    @media (max-width: 1100px){
      .solutions-map{min-height:860px}
      .solutions-core{min-width:370px}
      .solutions-node{width:260px;max-width:260px}
      .solutions-node h3{font-size:16px}
      .hud-panel{width:280px}
      .node-tve{left:81.5%; top:39%;}
      .node-parking{left:81.5%;}
    }

    @media (max-width: 900px){
      .solutions-map{
        min-height:auto;
        padding:22px 16px 18px;
      }

      .hud-panel{
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        margin-bottom:14px;
      }

      .solutions-center{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        margin:10px auto 18px;
      }

      .solutions-center::before,
      .solutions-center::after,
      .core-orbit,
      .solutions-lines,
      .ambient-glow,
      .demo-controls{
        display:none;
      }

      .solutions-core{
        min-width:unset;
        width:min(100%, 420px);
        margin:0 auto;
      }

      .solutions-node{
        position:relative;
        top:auto !important;
        left:auto !important;
        transform:none !important;
        width:100%;
        max-width:none;
        margin-top:14px;
      }

      .solutions-node:hover,
      .solutions-node.is-active{
        transform:none !important;
      }
    }
/* ======================================================
   SOLUTIONS MAP OPTIMIZED RWD PATCH
   請放在原本 CSS 最後面
====================================================== */

/* ---------- Desktop tuning ---------- */
@media (min-width: 1200px){
  .solutions-map{
    min-height: 860px;
    padding: 34px 36px;
  }

  .solutions-center::before{
    width: 380px;
    height: 380px;
    opacity: .75;
  }

  .solutions-center::after{
    width: 210px;
    height: 210px;
    opacity: .5;
  }

  .solutions-core{
    min-width: 380px;
    padding: 18px 26px 15px;
  }

  .core-label{
    font-size: 18px;
  }

  .core-sub{
    font-size: 12px;
  }

  .node-its{ top:15%; left:50%; }
  .node-harbor{ top:33%; left:16%; }
  .node-campus{ top:68%; left:16%; }
  .node-tve{ top:32%; left:84%; }
  .node-parking{ top:65%; left:84%; }
  .node-tunnel{ top:81%; left:50%; }

  .solutions-node{
    width: 276px;
    max-width: 276px;
    padding: 16px 16px 14px;
  }

  .solutions-node h3{
    font-size: 15px;
  }

  .solutions-node p{
    font-size: 12px;
    line-height: 1.62;
  }
}

/* ---------- iPad / small desktop ---------- */
@media (max-width: 1199px){
  .page-shell{
    width:min(1200px, calc(100% - 28px));
    padding: 32px 0 24px;
  }

  .section-title{
    font-size: clamp(30px, 4vw, 46px);
  }

  .section-desc{
    width:min(760px, 100%);
    font-size: 14px;
    line-height: 1.75;
  }

  .solutions-map{
    min-height: 760px;
    padding: 22px;
    border-radius: 34px;
  }

  .solutions-node{
    width: 232px;
    max-width: 232px;
    padding: 14px 14px 13px;
    border-radius: 22px;
  }

  .solutions-node h3{
    font-size: 14px;
  }

  .solutions-node p{
    font-size: 11.5px;
    line-height: 1.56;
  }

  .node-tags span{
    font-size: 10px;
    padding: 5px 8px;
  }

  .node-its{ top:15%; left:50%; }
  .node-harbor{ top:33%; left:14%; }
  .node-campus{ top:68%; left:14%; }
  .node-tve{ top:33%; left:85%; }
  .node-parking{ top:68%; left:85%; }
  .node-tunnel{ top:84%; left:50%; }

  .solutions-core{
    min-width: 320px;
    padding: 16px 22px 14px;
  }

  .core-label{
    font-size: 16px;
  }

  .core-sub{
    font-size: 11px;
  }

  .core-live{
    font-size: 10px;
    padding: 5px 10px;
  }

  .solutions-center::before{
    width: 280px;
    height: 280px;
  }

  .solutions-center::after{
    width: 150px;
    height: 150px;
  }

  .core-orbit{
    width: 180px;
    height: 180px;
  }
}

/* ---------- Tablet portrait / mobile start ---------- */
@media (max-width: 900px){
  .page-shell{
    width: calc(100% - 20px);
    padding: 22px 0 18px;
  }

  .section-header{
    margin-bottom: 14px;
  }

  .section-title{
    font-size: clamp(26px, 7vw, 40px);
    line-height: 1.14;
  }

  .section-title .en{
    display:block;
    margin-top:8px;
  }

  .section-desc{
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
  }

  .solutions-map{
    min-height: auto;
    padding: 16px;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* 手機/平板時移除會造成殘影與重疊感的絕對定位效果 */
  .solutions-lines,
  .ambient-glow,
  .solutions-center::before,
  .solutions-center::after,
  .core-orbit{
    display: none !important;
  }

  .solutions-center{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    order: 2;
    margin: 2px auto 2px;
    width: 100%;
  }

  .solutions-core{
    min-width: unset;
    width: min(100%, 340px);
    margin: 0 auto;
    border-radius: 28px;
    padding: 16px 16px 14px;
  }

  .core-label{
    flex-wrap: wrap;
    font-size: 15px;
    line-height: 1.35;
    gap: 8px;
  }

  .core-sub{
    font-size: 11px;
    line-height: 1.5;
  }

  .core-live{
    margin-top: 8px;
    font-size: 10px;
    padding: 5px 10px;
  }

  .solutions-node{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 14px 14px;
    border-radius: 22px;
    order: 3;
  }

  .solutions-node:hover,
  .solutions-node.is-active{
    transform: none !important;
  }

  .node-head{
    gap: 10px;
  }

  .node-icon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 16px;
  }

  .node-id{
    font-size: 9px;
    padding: 4px 8px;
  }

  .solutions-node h3{
    font-size: 15px;
    line-height: 1.35;
    margin-top: 8px;
  }

  .solutions-node p{
    margin: 10px 0 12px;
    font-size: 12px;
    line-height: 1.65;
  }

  .node-tags{
    gap: 6px;
  }

  .node-tags span{
    font-size: 10px;
    padding: 5px 8px;
  }

  .node-foot{
    margin-top: 10px;
  }

  .node-hint{
    font-size: 10px;
  }

  .node-arrow{
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .demo-controls{
    position: relative;
    left: auto;
    bottom: auto;
    order: 4;
    margin-top: 4px;
    gap: 8px;
  }

  .demo-chip,
  .demo-btn{
    padding: 10px 12px;
    font-size: 10px;
    border-radius: 14px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  .page-shell{
    width: calc(100% - 14px);
    padding: 18px 0 16px;
  }

  .section-title{
    font-size: 24px;
  }

  .section-desc{
    font-size: 12px;
    line-height: 1.65;
  }

  .solutions-map{
    padding: 14px;
    gap: 12px;
    border-radius: 22px;
  }

  .solutions-core{
    width: 100%;
    max-width: 230px;
    padding: 14px 12px 12px;
    border-radius: 999px;
  }

  .core-label{
    font-size: 14px;
    line-height: 1.28;
  }

  .core-sub{
    font-size: 10px;
    margin-top: 4px;
  }

  .core-live{
    margin-top: 8px;
    font-size: 9px;
    padding: 5px 10px;
  }

  .solutions-node{
    padding: 14px 13px 13px;
    border-radius: 18px;
  }

  .node-icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
  }

  .solutions-node h3{
    font-size: 14px;
  }

  .solutions-node p{
    font-size: 11.5px;
    line-height: 1.62;
  }

  .node-tags span{
    font-size: 9px;
    padding: 5px 7px;
  }

  .demo-controls{
    flex-direction: row;
    flex-wrap: wrap;
  }

  .demo-chip,
  .demo-btn{
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
}

/* ---------- Extra small mobile ---------- */
@media (max-width: 420px){
  .section-title{
    font-size: 22px;
  }

  .section-desc{
    font-size: 11px;
  }

  .solutions-map{
    padding: 12px;
    border-radius: 18px;
  }

  .solutions-core{
    max-width: 210px;
    padding: 13px 10px 11px;
  }

  .core-label{
    font-size: 13px;
  }

  .core-sub{
    font-size: 9.5px;
  }

  .core-live{
    font-size: 8.5px;
    padding: 4px 8px;
  }

  .solutions-node{
    border-radius: 16px;
    padding: 13px 12px 12px;
  }

  .solutions-node h3{
    font-size: 13px;
  }

  .solutions-node p{
    font-size: 11px;
  }

  .node-tags span{
    font-size: 8.5px;
    padding: 4px 7px;
  }

  .demo-chip,
  .demo-btn{
    flex: 1 1 100%;
  }
}



/* =============================
   Data Flow Beam Animation
============================= */
.beam-outer{
  fill:none;
  stroke:url(#lineGradMain);
  stroke-width:1.2;
  opacity:.35;
}

.beam-inner{
  fill:none;
  stroke:url(#lineGradInner);
  stroke-width:.6;
  stroke-dasharray:6 10;
  animation:flowMove 2.5s linear infinite;
  filter:url(#beamGlow);
}

/* 流動效果 */
@keyframes flowMove{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-40; }
}

/* =============================
   Core Pulse
============================= */

.solutions-core{
  animation:corePulse 3s ease-in-out infinite;
}

@keyframes corePulse{
  0%,100%{
    box-shadow:0 20px 40px rgba(40,72,170,.45);
    transform:scale(1);
  }
  50%{
    box-shadow:0 30px 80px rgba(40,72,170,.75);
    transform:scale(1.05);
  }
}

/* =============================
   Node Hover Interaction
============================= */

.solutions-node{
  transition:all .35s ease;
  cursor:pointer;
}

.solutions-node:hover{
  transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 30px 70px rgba(80,120,255,.35);
}

/* Active highlight */
.line-set.active .beam-inner{
  stroke:#7ff3ff;
  stroke-width:1.5;
  animation-duration:1s;
}

.line-set.active .beam-outer{
  opacity:.8;
}

/* =============================
   Pulse Dot（
============================= */

.pulse-dot{
  display:block !important;
  offset-distance:0%;
  animation:moveDot 3s linear infinite;
}

@keyframes moveDot{
  0%{ offset-distance:0%; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}

/* ======================================================
   ARCHITECTURE – BASE
====================================================== */
.section-architecture{
  margin-top:90px;
  opacity:0;
  transform:translateY(30px);
  animation:archReveal 0.9s ease-out forwards;
}

@keyframes archReveal{
  0%{
    opacity:0;
    transform:translateY(30px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.arch-card{
  margin-top:24px;
  border-radius:32px;  
  padding:26px;
  box-shadow:0 24px 60px rgba(39,62,140,.18);
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.85),
      rgba(255,255,255,.65)
    );
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  border:1px solid rgba(255,255,255,.55);
}

/* 外框虛線 + 跑光 */
.arch-card::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:26px;
  border:1px dashed rgba(143,165,230,.55);
  background:
    linear-gradient(90deg,rgba(143,165,230,0) 0%,
                         rgba(143,165,230,.9) 50%,
                         rgba(143,165,230,0) 100%);
  background-size:200% 100%;
  animation:dashedFlow 4s linear infinite;
  pointer-events:none;
}

/* 背景柔光流動 */
.arch-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0% 0%,
    rgba(255,255,255,.20) 0,
    rgba(255,255,255,0) 55%);
  filter:blur(18px);
  animation:bgFlow 8s linear infinite;
  pointer-events:none;
}

@keyframes dashedFlow {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

@keyframes bgFlow {
  0%{ transform:translateX(-30%); }
  100%{ transform:translateX(60%); }
}

/* 內部網格 + 連線 */
.arch-inner{
  position:relative;
  min-height:360px;
  display:grid;
  grid-template-areas:
    "left top right"
    "left core right"
    "bottom core right";
  grid-template-columns:1.05fr 1.1fr 1.05fr;
  grid-template-rows:auto auto auto;
  gap:18px;
  z-index:1;
}

/* 垂直中線 */
.arch-inner::before{
  content:"";
  position:absolute;
  top:6%;
  bottom:6%;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
    rgba(120,150,230,0) 0,
    rgba(120,150,230,.9) 25%,
    rgba(120,150,230,.3) 50%,
    rgba(120,150,230,.9) 75%,
    rgba(120,150,230,0) 100%);
  opacity:.6;
  pointer-events:none;
}

/* Core 水平連線 */
.arch-inner::after{
  content:"";
  position:absolute;
  top:50%;
  left:13%;
  right:13%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right,
    rgba(120,150,230,0) 0,
    rgba(120,150,230,.7) 20%,
    rgba(120,150,230,.2) 50%,
    rgba(120,150,230,.7) 80%,
    rgba(120,150,230,0) 100%);
  opacity:.6;
  pointer-events:none;
}

/* 資料流粒子 – 左→Core */
.particle-left{
  position:absolute;
  width:6px;height:6px;
  background:#8db2ff;
  border-radius:999px;
  top:50%; left:13%;
  transform:translate(-40px,-50%);
  animation:flowLeft 2.4s linear infinite;
  filter:blur(0.5px);
}

@keyframes flowLeft{
  0%{ transform:translate(-40px,-50%); opacity:0; }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(50px,-50%); opacity:0; }
}

/* 資料流粒子 – Core→右 */
.particle-right{
  position:absolute;
  width:6px;height:6px;
  background:#8db2ff;
  border-radius:999px;
  top:50%; right:13%;
  transform:translate(40px,-50%);
  animation:flowRight 2.8s linear infinite;
  filter:blur(0.5px);
}

@keyframes flowRight{
  0%{ transform:translate(40px,-50%); opacity:0; }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(-50px,-50%); opacity:0; }
}

/* Node 卡片 */
.arch-node{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 18px 40px rgba(25,40,120,.16),
    inset 0 1px 0 rgba(255,255,255,.6);
  border-radius:22px;
  padding:16px 18px;  
  font-size:13px;
  position:relative;
  z-index:1;
  transition:transform .35s ease, box-shadow .35s ease;
  opacity:0;
  animation:nodeEnter .6s cubic-bezier(.2,1.2,.3,1) both;
}

@keyframes nodeEnter{
  0%{ opacity:0; transform:translateY(25px); }
  100%{ opacity:1; transform:translateY(0); }
}

.arch-node:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 24px 60px rgba(30,60,140,.28),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.arch-node h3{
  /* margin:0 0 6px; */
  font-size:15px;
  font-weight:700;
  color:#1a2340;
  letter-spacing:.02em;
}

.arch-sub{
  /* margin:0 0 8px; */
  font-size:13px;
  color:#6b74a6;
  letter-spacing:.04em;
}

.arch-node ul{
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:var(--muted,#7b84b0);
}

.arch-node ul li{
  line-height:1.55;
  color:#5f678a;
}

.arch-right{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.88),
      rgba(240,245,255,.75)
    );
  border:1px solid rgba(255,255,255,.6);
}

.arch-right ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.arch-right ul li i{
  font-size:18px;
  margin-top:2px;
}

.arch-left{grid-area:left;}
.arch-top{grid-area:top;}
.arch-right{grid-area:right;}
.arch-bottom{grid-area:bottom;}

/* Core – ViDA.ai 中心 */
.arch-core{
  grid-area:core;
  align-self:center;
  justify-self:center;
  text-align:center;
  padding:26px 26px 20px;
  border-radius:38px;  
  color:#f7fbff;
  min-width:260px;  
  position:relative;
  z-index:4;
  animation:corePulse 4.5s ease-in-out infinite;
  background:
    radial-gradient(circle at 20% 0%,
      rgba(255,255,255,.85),
      rgba(160,185,255,.85) 45%,
      rgba(95,120,255,.9) 100%
    );
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 26px 60px rgba(27,58,160,.6);
}

.arch-core h3{
  /* margin:0 0 6px; */
  font-size:20px;
  font-weight:700;
  letter-spacing:.03em;
}

.arch-core p{
  /* margin:0 0 10px; */
  font-size:13px;
  opacity:.9;
}

.arch-core-chip{
  font-size:12px;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:999px;
  display:inline-block;
  margin-top:6px;  
  background: rgba(15,20,60,.85);
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.35);
}

/* Core 外圈 Halo 脈衝 */
.arch-core::before{
  content:"";
  position:absolute;
  inset:-30px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(150,180,255,.45), rgba(150,180,255,0));
  filter:blur(12px);
  animation:coreHalo 3.2s ease-in-out infinite;
  z-index:-1;
}

/* Core 動態陰影呼吸 */
@keyframes corePulse {
  0%  { box-shadow:0 26px 60px rgba(27,58,160,0.55); }
  50% { box-shadow:0 32px 80px rgba(27,58,160,0.9); }
  100%{ box-shadow:0 26px 60px rgba(27,58,160,0.55); }
}

@keyframes coreHalo{
  0%{ opacity:0.25; transform:scale(1); }
  50%{ opacity:0.50; transform:scale(1.13); }
  100%{ opacity:0.25; transform:scale(1); }
}


/* ==============================
   ViDA.ai Smart City Brain Core
============================== */

.arch-core-brain {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  min-height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  padding: 26px 20px 22px;
  text-align: center;
  z-index: 8;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 28%, rgba(126, 165, 255, .34), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,248,255,.72));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow:
    0 28px 70px rgba(91, 111, 255, .22),
    inset 0 0 30px rgba(255,255,255,.55);
  backdrop-filter: blur(18px);
}

.arch-core-brain::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(93, 115, 255, .22),
      transparent,
      rgba(139, 225, 255, .24),
      transparent
    );
  animation: brainRotate 9s linear infinite;
  z-index: -2;
}

.arch-core-brain::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(246,248,255,.68));
  z-index: -1;
}

.brain-core-visual {
  position: relative;
  width: 150px;
  height: 112px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 18px 26px rgba(93,115,255,.25));
  animation: brainFloat 4.8s ease-in-out infinite;
}

.brain-lobe {
  position: absolute;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(132,164,255,.9) 48%, rgba(93,115,255,.82));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 0 20px rgba(255,255,255,.36);
}

.lobe-1 {
  left: 6px;
  top: 30px;
  width: 48px;
  height: 52px;
  border-radius: 62% 38% 46% 54%;
}

.lobe-2 {
  left: 38px;
  top: 10px;
  width: 54px;
  height: 58px;
  border-radius: 54% 46% 45% 55%;
}

.lobe-3 {
  right: 6px;
  top: 30px;
  width: 48px;
  height: 52px;
  border-radius: 38% 62% 54% 46%;
}

.lobe-4 {
  left: 26px;
  bottom: 8px;
  width: 50px;
  height: 46px;
  border-radius: 52% 48% 60% 40%;
}

.lobe-5 {
  right: 26px;
  bottom: 8px;
  width: 50px;
  height: 46px;
  border-radius: 48% 52% 40% 60%;
}

.brain-line {
  position: absolute;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 10px rgba(139,225,255,.9);
  z-index: 3;
  transform-origin: left center;
}

.line-1 {
  width: 56px;
  left: 44px;
  top: 45px;
  transform: rotate(18deg);
}

.line-2 {
  width: 48px;
  left: 52px;
  top: 62px;
  transform: rotate(-12deg);
}

.line-3 {
  width: 54px;
  left: 46px;
  top: 78px;
  transform: rotate(14deg);
}

.brain-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 6px rgba(93,115,255,.14),
    0 0 18px rgba(93,115,255,.8);
  z-index: 4;
  animation: brainSpark 2s ease-in-out infinite;
}

.spark-1 {
  left: 48px;
  top: 44px;
}

.spark-2 {
  right: 42px;
  top: 58px;
  animation-delay: .35s;
}

.spark-3 {
  left: 70px;
  bottom: 26px;
  animation-delay: .75s;
}

.brain-orbit {
  position: absolute;
  left: 50%;
  top: 34%;
  border-radius: 50%;
  border: 1px dashed rgba(93,115,255,.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brain-orbit-1 {
  width: 200px;
  height: 200px;
  animation: brainOrbit 14s linear infinite;
}

.brain-orbit-2 {
  width: 150px;
  height: 150px;
  animation: brainOrbit 10s linear infinite reverse;
}

.arch-core-brain h3 {
  position: relative;
  z-index: 5;
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #1d2a4f;
}

.arch-core-brain p {
  position: relative;
  z-index: 5;
  margin: 0 0 14px;
  color: #5f6b8c;
  font-size: .95rem;
  line-height: 1.55;
  font-weight: 700;
}

.arch-core-brain .arch-core-chip {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  color: #5266e7;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(93,115,255,.18);
  box-shadow: 0 10px 24px rgba(93,115,255,.12);
}

@keyframes brainFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.025);
  }
}

@keyframes brainSpark {
  0%, 100% {
    transform: scale(1);
    opacity: .95;
  }
  50% {
    transform: scale(1.45);
    opacity: .45;
  }
}

@keyframes brainOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

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

/* RWD */
@media (max-width: 768px) {
  .arch-core-brain {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
    margin: 24px auto;
  }
}

/* ======================================================
   RWD – Desktop Icons
====================================================== */
@media(min-width:769px){

  .arch-right ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .arch-right ul li{
    display:flex;
    align-items:flex-start;
    font-size:15px;
    font-weight:700;
    line-height:1.55;
    background:linear-gradient(135deg,#5b50d3,#040008);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .arch-right ul li i{
    width:26px;
    font-size:19px;
    flex-shrink:0;
    margin-top:2px;
    background:linear-gradient(135deg,#6b5cff,#9e76ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:iconPulse 2.8s ease-in-out infinite;
  }

  @keyframes iconPulse{
    0%{ opacity:.6; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.18); }
    100%{ opacity:.6; transform:scale(1); }
  }
}

/* ======================================================
   ARCHITECTURE – MOBILE RWD 
====================================================== */
@media(max-width:768px){

  .arch-card::after,
  .arch-card::before,
  .arch-inner::before,
  .arch-inner::after{
    display:none !important;
  }

  .arch-card{
    overflow:visible !important;
    padding:20px !important;
  }

  .arch-left,
  .arch-top,
  .arch-right,
  .arch-bottom,
  .arch-core{
    grid-area:auto !important;
  }

  .arch-core,
  .arch-node,
  .particle-left,
  .particle-right{
    animation:none !important;
    transition:none !important;
  }

  .particle-left,
  .particle-right{
    display:none !important;
  }

  .arch-node:hover{
    transform:none !important;
    box-shadow:0 18px 40px rgba(98,124,190,.18) !important;
    opacity:1 !important;
    filter:none !important;
  }

  .arch-node:hover ~ .arch-core,
  .arch-core:hover{
    transform:scale(1.04);
  }

  .arch-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    height:auto !important;       
    min-height:auto !important;
  }

  .arch-inner:hover .arch-node{
    opacity:.35;
    filter:blur(.4px);
  }

  .arch-core{
    order:1;
    margin:10px auto 20px;
    max-width:320px;
    z-index:5 !important;
    background:
      linear-gradient(180deg,
        rgba(205, 202, 252, 0.95),
        rgba(95, 120, 255, .9)
      );
    color:#e7eaf1;
  }

  .arch-core h3{
    font-size:20px;
    letter-spacing:.02em;
  }

  .arch-left,
  .arch-top,
  .arch-right,
  .arch-bottom{
    order:2;
    width:100% !important;
  }

  .arch-node{
    padding:14px 16px !important;
    font-size:12px !important;
    
  }

  .arch-node.is-active{
    opacity:1 !important;
    filter:none !important;
    transform:scale(1.05);
    box-shadow:
      0 30px 80px rgba(50,90,200,.35);
    z-index:10;
  }

  .arch-node h3{
    font-size:13px !important;
  }

  .arch-node ul{
    font-size:12px !important;
    list-style:disc !important;
    padding-left:18px !important;
    display:block !important;
  }

  .arch-right ul li,
  .arch-right ul li i{
    background:none !important;
    -webkit-text-fill-color:unset !important;
    color:#505b90 !important;
  }

  .section-title-gradient{
    font-size:24px;
  }

  .section-desc{
    font-size:14px;
  }

}

/* ======================================================
   SECTION TITLE – OFFICIAL 2-TONE
====================================================== */
.section-title-2tone{
  margin:0 0 10px;
  font-size:28px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
}

.section-title-2tone .t-dark{
  color:#0f172a; /* 官網主墨色 */
}

.section-title-2tone .t-accent{
  margin-left:2px;
  color: var(--accent);
  text-shadow: 0 6px 18px rgba(79, 114, 255, .45);
  background:linear-gradient(135deg,#4f7cff,#8fb3ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 英文副標（官網感關鍵） */
.section-title-2tone .t-en{
  margin-left:6px;
  margin:0 6px;
  font-size:.8em;
  font-weight:500;
  letter-spacing:.12em;
  color:#9aa3c7;
  white-space:nowrap;
}

@media(max-width:768px){
  .section-title-2tone{
    font-size:22px;
  }
  .section-title-2tone .t-en{
    display:block;
    margin:4px 0 0;
    letter-spacing:.14em;
  }
}
/* ======================================================
   PRODUCTS 
====================================================== */

.section-products{
  margin-top:90px;
}

.cards-grid{
  margin-top:24px;
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
}

/* RWD columns */
@media(max-width:1200px){
  .cards-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .cards-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .cards-grid{grid-template-columns:1fr;}
}

.product-card{
  border-radius:22px;
  overflow:hidden;
  background:#050f3a;
  color:#e6ebff;
  box-shadow:0 12px 30px rgba(7,14,46,.7);
  position:relative;
  transform:translateY(0);
  transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease;
}

/* Hover 浮起＋光暈 */
.product-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 46px rgba(33,69,190,.8);
}

.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:2px;
  background:linear-gradient(135deg,rgba(120,180,255,.6),rgba(70,30,255,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
}

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

.card-thumb{
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:14px;
  background:#eef3ff;
}

.product-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#eef3ff;
  transition:transform .55s ease;
}

.product-card:hover .product-img{
  transform:scale(1.08);
}

.card-body{
  padding:16px 18px 18px;
  font-size:12px;
}

.card-pill{
  display:inline-flex;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  font-size:12px;
  margin-bottom:8px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}

.card-body h3{
  margin:0 0 8px;
  font-size:18px;
}

.card-body p{
  margin:0 0 8px;
  color:#cbd5ff;
}

.card-body ul{
  margin:0;
  padding-left:18px;
  font-size:12px;
  color:#9fa8e8;
}

/* gradients */
.gradient-avi{background:linear-gradient(135deg,#5f7bff,#8fd8ff);}
.gradient-vds{background:linear-gradient(135deg,#7b5fff,#f78dff);}
.gradient-qld{background:linear-gradient(135deg,#ffb56f,#ff6f91);}
.gradient-iid{background:linear-gradient(135deg,#2ef8c5,#3b82f6);}
.gradient-anpr{background:linear-gradient(135deg,#4ade80,#22c55e);}
.gradient-pfd{background:linear-gradient(135deg,#a855f7,#6366f1);}
.gradient-fsd{background:linear-gradient(135deg,#ff6f6f,#ffa36f);}
.gradient-ccr{background:linear-gradient(135deg,#4dc4ff,#2563eb);}

.clickable-card {
  cursor: pointer;
}

.product-card h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-card h3 a i {
  font-size: 0.88em;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.clickable-card:hover h3 a i {
  transform: translate(3px, -3px);
  opacity: 1;
}

.clickable-card {
  cursor: pointer;
}

.product-card h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-card h3 a i {
  font-size: 0.88em;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.clickable-card:hover h3 a i {
  transform: translate(3px, -3px);
  opacity: 1;
}
/* ======================================================
   NEWS
====================================================== */
.section-news{
  margin-top:90px;
}

.news-carousel{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:10px;
}

.news-window{
  overflow:hidden;
  width:100%;
  position:relative;
}

.news-track{
  display:flex;
  gap:20px;
  transition:transform .55s ease;
  will-change:transform;
}

.news-card{
  flex:0 0 calc(25% - 20px);
  min-width:calc(25% - 20px);
  border-radius:24px;
  overflow:hidden;
  background:#ffffffee;
  backdrop-filter:blur(6px);
  box-shadow:0 12px 32px rgba(30,60,150,.18);
  display:flex;
  flex-direction:column;
  position:relative;
  transform:translateY(0);
  transition:transform .35s ease,box-shadow .35s ease;
}

.news-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(40,72,170,.35);
}

.news-thumb{
  width:100%;
  height:240px;
  overflow:hidden; 
}

.news-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.news-body{
  padding:16px 18px;
  color:#1b2340;
}

.news-tag{
  display:inline-flex;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  background:#e6ebff;
  color:#4b57a6;
  margin-bottom:6px;
}

.news-body h3{
  font-size:17px;
  line-height:1.35;
  margin:4px 0 6px;
}

.news-body p{
  margin:6px 0 10px;
  font-size:14px;
  line-height:1.6;
  color:#4a5070;
}

.news-meta{
  font-size:11px;
  color:#9da6ff;
}

/* arrows */
.news-nav{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(40,49,120,.3);
  background:rgba(248,250,255,.95);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#4b57a6;
  transition:.2s;
}

.news-nav:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(60,72,155,.4);
}

/* NEWS RWD */
@media(max-width:1024px){
  .news-card{
    flex:0 0 45%;
    min-width:45%;
  }
}

@media(max-width:768px){
  .news-card{
    flex:0 0 80%;
    min-width:80%;
  }
  .news-thumb{height:180px;}
  .news-body h3{font-size:18px;}
}

/* ======================================================
   CONTACT CTA - iOS Glass Design
====================================================== */

.section-contact-cta {
  position: relative;
  padding: 110px 6% 130px;
  background:
    radial-gradient(circle at 18% 18%, rgba(95, 132, 255, 0.22), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(91, 213, 255, 0.16), transparent 30%),
    linear-gradient(180deg, #eef3ff 0%, #f8fbff 52%, #ffffff 100%);
  overflow: hidden;
}

.section-contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(72, 99, 160, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 99, 160, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent 86%);
  pointer-events: none;
}

.contact-cta-card {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 38px;
  align-items: center;
  border-radius: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 34px 100px rgba(49, 72, 142, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  overflow: hidden;
}

.contact-cta-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 30px;
  border: 1px dashed rgba(120, 146, 220, 0.42);
  pointer-events: none;
}

.contact-cta-card::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(88,132,255,0.28), transparent 68%);
  pointer-events: none;
}

.contact-cta-copy {
  position: relative;
  z-index: 2;
}

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  margin-bottom: 22px;
  border-radius: 999px;
  color: #4966ff;
  background: rgba(84, 115, 255, 0.09);
  border: 1px solid rgba(84, 115, 255, 0.16);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.contact-cta-copy h2 {
  margin: 0 0 20px;
  color: #111827;
  font-size: clamp(30px, 3.6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.04em;
  font-weight: 900;
}

.contact-cta-copy p {
  max-width: 680px;
  margin: 0;
  color: #4d5c73;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
}

.contact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.contact-cta-btn.primary {
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.34), transparent 32%),
    linear-gradient(135deg, #315bff 0%, #6bcfff 100%);
  box-shadow: 0 18px 36px rgba(49, 91, 255, 0.28);
}

.contact-cta-btn.secondary {
  color: #25365f;
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(100, 124, 190, 0.22);
}

.contact-cta-btn:hover {
  transform: translateY(-3px);
}

.contact-cta-btn.primary:hover {
  box-shadow: 0 24px 48px rgba(49, 91, 255, 0.36);
}

.contact-cta-panel {
  position: relative;
  z-index: 2;
  padding: 28px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(242,246,255,0.64));
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow:
    0 24px 70px rgba(44, 69, 126, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.contact-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #18213a;
  font-size: 17px;
  font-weight: 900;
}

.panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #4f6dff;
  box-shadow: 0 0 0 8px rgba(79,109,255,0.12);
}

.contact-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-panel-grid span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #435073;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(98, 124, 190, 0.14);
  font-size: 14px;
  font-weight: 700;
}

.contact-panel-grid i {
  width: 26px;
  color: #5d6dff;
  font-size: 17px;
}

.contact-panel-footer {
  margin-top: 22px;
  padding: 18px;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 25% 10%, rgba(255,255,255,0.32), transparent 36%),
    linear-gradient(135deg, #172344 0%, #506cff 100%);
  box-shadow: 0 18px 42px rgba(49, 91, 255, 0.22);
}

.contact-panel-footer strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.contact-panel-footer small {
  display: block;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}

/* Mobile */
@media (max-width: 920px) {
  .contact-cta-card {
    grid-template-columns: 1fr;
    padding: 38px 26px;
  }

  .contact-cta-card::before {
    inset: 12px;
  }

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

@media (max-width: 560px) {
  .section-contact-cta {
    padding: 78px 20px 90px;
  }

  .contact-cta-copy h2 {
    font-size: 28px;
  }

  .contact-cta-copy p {
    font-size: 15px;
  }

  .contact-cta-actions {
    flex-direction: column;
  }

  .contact-cta-btn {
    width: 100%;
  }
}

/* ======================================================
   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-sub{
      width: 85%;
      margin-left: 7.5%;
      margin-right: 7.5%;
      border-radius: 14px;
      padding: 12px 14px;
    }
    .has-sub.open > .nav-sub{
      display:block !important;
    }
  } 
 
  /* ======================================================
  AI bot
====================================================== */
    .demo-note{
      position:fixed;
      left:18px;
      top:16px;
      color:#36507f;
      font-size:13px;
      opacity:.72;
      user-select:none;
      z-index:2;
    }

    #hipower-ai-btn{
      position:fixed;
      right:24px;
      bottom:24px;
      width:78px;
      height:78px;
      border-radius:50%;
      border:1px solid rgba(180,205,255,.18);
      background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(180deg, rgba(180,210,255,.26), rgba(120,170,255,.06));
      backdrop-filter:blur(18px) saturate(150%);
      -webkit-backdrop-filter:blur(18px) saturate(150%);
      box-shadow:var(--shadow), var(--glow), inset 0 1px 1px rgba(255,255,255,.12);
      cursor:pointer;
      z-index:99999;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:transform .22s ease, box-shadow .22s ease;
    }

    #hipower-ai-btn:hover{
      transform:translateY(-2px) scale(1.03);
      box-shadow:var(--shadow), 0 0 42px rgba(134,186,255,.28), inset 0 1px 1px rgba(255,255,255,.14);
    }

    #hipower-ai-btn svg{width:68%;height:68%;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))}

    #hipower-chat{
      position:fixed;
      right:18px;
      bottom:18px;
      width:440px;
      height:790px;
      max-height:calc(100vh - 36px);
      border-radius:22px;
      border:1px solid var(--stroke-strong);
      backdrop-filter: blur(8px) saturate(110%);
      background: linear-gradient(180deg, #050d1f, #030914);
      -webkit-backdrop-filter:blur(14px) saturate(130%);
      box-shadow:0 32px 90px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.04);
      display:none;
      flex-direction:column;
      overflow:hidden;
      z-index:99998;
    }

    .chat-header{
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,.05);
      background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      font-weight:700;
      color:#f3f8ff;
    }

    .brand-badge{
      width:30px;
      height:30px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(134,186,255,.12);
      border:1px solid rgba(134,186,255,.18);
      flex:0 0 auto;
    }

    .brand-badge svg{width:17px;height:17px;color:#9cc5ff}

    #closeChat{
      cursor:pointer;
      color:#d6e2fb;
      font-size:28px;
      line-height:1;
      user-select:none;
    }

    .chat-hero{
      padding:22px 20px 10px;
      text-align:center;
    }

    .chat-hero-icon{
      width:86px;
      height:86px;
      margin:0 auto 16px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background: linear-gradient(180deg, #5a8cff, #3c6ee6);
      box-shadow: 0 10px 24px rgba(90,140,255,.25);
      color:#09111d;
    }

    .chat-hero-icon svg{width:36px;height:36px}

    .chat-hero h2{
      margin:0 0 10px;
      font-size:22px;
      font-weight:700;
      color: #ffffff;
      text-shadow: none;
    }

    .chat-hero p{
      margin:0;
      color:#9fb9ff;
      font-size:14px;
      line-height:1.7;
    }

    #chatBody{
      flex:1;
      overflow:auto;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,255,255,.16) transparent;
    }

    .msg{
      max-width:90%;
      padding:12px 14px;
      border-radius:18px;
      line-height:1.72;
      white-space:pre-line;
      font-size:14px;
    }

    .msg.ai{
      align-self:flex-start;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.07);
      color:#f4f8ff;
    }

    .msg.user{
      align-self:flex-end;
      background:linear-gradient(180deg, rgba(134,186,255,.25), rgba(134,186,255,.14));
      border:1px solid rgba(134,186,255,.18);
      color:#fff;
    }

    .msg.system{
      align-self:center;
      background:rgba(147,242,195,.10);
      border:1px solid rgba(147,242,195,.18);
      color:#e9fff5;
      max-width:96%;
    }

    .cards{
      display:grid;
      gap:10px;
    }

    .option-card{
      border:none;
      border-radius:18px;
      padding:16px;
      text-align:left;
      background: rgba(20,40,80,.75);
      border: 1px solid rgba(134,186,255,.25);
      color:var(--text);
      cursor:pointer;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .option-card:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.085);
      border-color:rgba(134,186,255,.18);
    }

    .option-card strong{
      display:block;
      margin-bottom:6px;
      font-size:15px;
      color:#fff;
    }

    .option-card .small{
      color:#c9dcff;
      font-size:13px;
      line-height:1.55;
    }

    .quick-menu{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:8px;
      padding:12px 14px;
      border-top:1px solid rgba(255,255,255,.05);
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    }

    .quick-menu button{
      min-height:62px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(20,40,80,.8);
      color:#eaf2ff;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      display:grid;
      place-items:center;
      gap:5px;
      padding:8px 4px;
      transition:.2s ease;
    }

    .quick-menu button.active{
      background: linear-gradient(180deg,#7fb3ff,#5a95f5);
      color:#08101c;
      border-color:rgba(134,186,255,.30);
    }

    .quick-menu svg{width:18px;height:18px;color:#a7c8ff}

    .chat-input{
      display:flex;
      gap:10px;
      padding:14px;
      border-top:1px solid rgba(255,255,255,.06);
      background:rgba(7,16,33,.72);
    }

    .chat-input input{
      flex:1;
      height:48px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.18);
      color:#fff;
      padding:0 14px;
      outline:none;
      font:inherit;
    }

    .chat-input input::placeholder{color:#c0d2f1}

    .chat-input button{
      width:48px;
      height:48px;
      border-radius:16px;
      border:none;
      cursor:pointer;
      background:linear-gradient(180deg, #95c4ff, #79aefe);
      color:#08101c;
      display:grid;
      place-items:center;
      font-size:18px;
      font-weight:700;
    }

    .summary-box{
      border-radius:18px;
      padding:14px;
      background:rgba(137,186,255,.10);
      border:1px solid rgba(137,186,255,.18);
      color:#eef5ff;
      line-height:1.7;
      font-size:14px;
    }

    .lead-form{
      display:grid;
      gap:8px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.06);
    }

    .lead-form input, .lead-form select, .lead-form textarea{
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.09);
      color:#fff;
      padding:10px 12px;
      outline:none;
      font:inherit;
      width:100%;
    }

    .lead-form textarea{
      min-height:88px;
      resize:vertical;
    }

    .lead-form input::placeholder,
    .lead-form textarea::placeholder{
      color:#c0d2f1;
    }

    .lead-form button{
      height:42px;
      border-radius:12px;
      border:none;
      background:linear-gradient(180deg, #95c4ff, #79aefe);
      color:#08101c;
      font-weight:700;
      cursor:pointer;
      font:inherit;
    }

    .tip{
      font-size:12px;
      color:#c5d5f4;
      padding:0 14px 8px;
      line-height:1.6;
    }

    @media (max-width:520px){
      #hipower-chat{
        right:8px;
        left:8px;
        width:auto;
        height:calc(100vh - 16px);
        max-height:none;
        bottom:8px;
      }
      #hipower-ai-btn{
        right:16px;
        bottom:16px;
      }
    }


/* =========================================================
       VF DETAIL – ROOT
    ========================================================= */

    .vf-detail-glass{
      --theme:#6b7cff;
      --theme-soft:color-mix(in srgb,var(--theme) 16%, white);
      --theme-shadow:color-mix(in srgb,var(--theme) 34%, transparent);
      position:relative;
      min-height:100vh;
      padding:120px 6vw;
      overflow:hidden;
      background:
        radial-gradient(900px 420px at 18% -10%, color-mix(in srgb,var(--theme) 18%, transparent), transparent 58%),
        radial-gradient(700px 420px at 92% 18%, rgba(255,255,255,.65), transparent 62%),
        linear-gradient(180deg,#f7f9fc,#eef2f7);
    }

    .vf-detail-glass::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 78%);
    }

    .vf-detail-glass::after{
      content:"AIoT / ViDA.ai / Vision Intelligence";
      position:absolute;
      right:6vw;
      top:42px;
      font-size:11px;
      letter-spacing:.24em;
      color:#94a3b8;
      text-transform:uppercase;
    }

    /* ================= GRID ================= */

    .vf-detail-grid{
      position:relative;
      z-index:1;
      max-width:1280px;
      margin:auto;
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:80px;
      align-items:start;
    }

    /* =========================================================
       LEFT – INFO
    ========================================================= */

    .vf-detail-info{
      position:relative;
    }

    .vf-detail-info h2{
      margin:18px 0 12px;
      font-size:34px;
      font-weight:800;
      color:#111827;
    }

    .vf-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 15px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      background:color-mix(in srgb,var(--theme) 18%, white);
      color:var(--theme);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
    }

    .vf-badge::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--theme);
      box-shadow:0 0 16px var(--theme);
    }

    .vf-detail-info h2{
      margin:18px 0 12px;
      font-size:clamp(32px,4vw,48px);
      font-weight:800;
      letter-spacing:-.04em;
      line-height:1.12;
    }

    .vf-desc{
      margin:0;
      font-size:16px;
      line-height:1.8;
      color:#475569;
      max-width:560px;
    }

    /* =========================================================
       FEATURE BUTTONS
    ========================================================= */

    .vf-feature-buttons{
      margin:36px 0;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }

    .vf-btn{
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      min-height:76px;
      padding:16px 18px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.75);
      cursor:pointer;
      overflow:hidden;
      background:
        linear-gradient(180deg,
          rgba(255,255,255,.98),
          rgba(255,255,255,.8)
        );
      backdrop-filter:blur(16px);
      box-shadow:
        0 10px 26px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
      font-size:15px;
      font-weight:650;
      color:#1f2937;
      text-align:left;
      transition:
        transform .3s cubic-bezier(.4,0,.2,1),
        box-shadow .3s,
        background .3s,
        color .3s,
        border-color .3s;
    }

    .vf-btn::after{
      content:"";
      position:absolute;
      inset:auto 16px 10px 68px;
      height:3px;
      border-radius:99px;
      background:linear-gradient(90deg,var(--theme),transparent);
      opacity:0;
      transform:scaleX(.25);
      transform-origin:left;
      transition:.32s ease;
    }

    .vf-btn i{
      width:38px;
      height:38px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:15px;
      background:color-mix(in srgb,var(--theme) 18%,transparent);
      color:var(--theme);
      flex-shrink:0;
      transition:.3s;
    }

    .vf-btn span{
      line-height:1.35;
    }

    .vf-btn:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 42px rgba(0,0,0,.12);
      border-color:color-mix(in srgb,var(--theme) 25%, white);
    }

    .vf-btn.is-active{
      background:
        linear-gradient(180deg,
          color-mix(in srgb,var(--theme) 92%,#fff),
          var(--theme)
        );
      color:#fff;
      box-shadow:0 18px 42px color-mix(in srgb,var(--theme) 46%, transparent);
    }

    .vf-btn.is-active::after{
      opacity:.8;
      transform:scaleX(1);
      background:rgba(255,255,255,.75);
    }

    .vf-btn.is-active i{
      background:rgba(255,255,255,.28);
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
    }

    /* =========================================================
       FEATURE INSIGHT CARD
    ========================================================= */

    .vf-feature-insight{
      margin-top:-12px;
      margin-bottom:34px;
      padding:22px 24px;
      border-radius:24px;
      background:rgba(255,255,255,.78);
      backdrop-filter:blur(18px);
      box-shadow:
        0 18px 44px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
      border:1px solid rgba(255,255,255,.72);
    }

    .vf-feature-insight-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:12px;
    }

    .vf-feature-insight strong{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:15px;
      color:#0f172a;
    }

    .vf-feature-insight strong i{
      color:var(--theme);
    }

    .vf-feature-level{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      color:var(--theme);
      background:color-mix(in srgb,var(--theme) 14%, white);
      white-space:nowrap;
    }

    .vf-feature-insight p{
      margin:0;
      color:#475569;
      font-size:14px;
      line-height:1.7;
    }

    .vf-progress-track{
      position:relative;
      margin-top:16px;
      height:7px;
      border-radius:99px;
      background:#e5e7eb;
      overflow:hidden;
    }

    .vf-progress-bar{
      width:0%;
      height:100%;
      border-radius:99px;
      background:linear-gradient(90deg,var(--theme),color-mix(in srgb,var(--theme) 40%, white));
      transition:width .55s cubic-bezier(.4,0,.2,1);
    }

    /* =========================================================
       USAGE GLASS
    ========================================================= */

    .vf-usage-glass{
      margin-top:36px;
      padding:26px 28px;
      border-radius:24px;
      background:rgba(255,255,255,.75);
      backdrop-filter:blur(18px);
      box-shadow:
        0 18px 46px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
      border:1px solid rgba(255,255,255,.74);
    }

    .vf-usage-glass h4{
      display:flex;
      align-items:center;
      gap:10px;
      margin:0 0 16px;
      font-size:15px;
      font-weight:750;
    }

    .vf-usage-glass h4 i{
      color:var(--theme);
    }

    .vf-usage-glass ul{
      list-style:none;
      padding:0;
      margin:0;
    }

    .vf-usage-glass li{
      display:flex;
      align-items:center;
      gap:10px;
      margin:10px 0;
      color:#374151;
      font-size:14px;
    }

    .vf-usage-glass li i{
      color:var(--theme);
    }

    /* =========================================================
       RIGHT – VISUAL
    ========================================================= */

    .vf-detail-visual{
      position:relative;
    }

    .vf-live-card{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      min-height:360px;
      box-shadow:0 30px 80px rgba(0,0,0,.25);
      background:#0f172a;
      transform:translateZ(0);
    }
 
.vf-live-video,
    .vf-live-fallback{
      width:100%;
      height:100%;
      min-height:360px;
      object-fit:cover;
      display:block;
      transition:opacity .35s ease, transform .35s ease;
    }

    .vf-live-fallback{
      position:absolute;
      inset:0;
      opacity:0;
      z-index:1;
    }

    .vf-live-card.show-fallback .vf-live-fallback{
      opacity:1;
    }

    .vf-live-card.show-fallback .vf-live-video{
      opacity:0;
    }

    .vf-live-card::after{
      content:"";
      position:absolute;
      inset:-100% 0 auto 0;
      height:100%;
      background:linear-gradient(
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.14) 50%,
        rgba(255,255,255,0) 100%
      );
      animation:vfScan 3.5s linear infinite;
      pointer-events:none;
      z-index:2;
    }

    .vf-live-card::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
      background-size:52px 52px;
      opacity:.16;
      mix-blend-mode:screen;
    }

    /* .vf-live-card::after{
      content:"";
      position:absolute;
      left:-50%;
      top:0;
      width:42%;
      height:100%;
      z-index:3;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg);
      animation:vfScan 4.8s ease-in-out infinite;
      pointer-events:none;
    } */

    @keyframes vfScan{
      0%,48%{ left:-55%; opacity:0; }
      58%{ opacity:.85; }
      78%{ left:115%; opacity:0; }
      100%{ left:115%; opacity:0; }
    }

    .vf-live-card.is-pulse{
      animation:vfLivePulse .55s ease;
    }

    .vf-live-card img{
      width:100%;
      min-height:360px;
      object-fit:cover;
      display:block;
      transition:opacity .35s ease,transform .35s ease;
    }

    .vf-live-overlay{
      position:absolute;
      z-index:4;
      left:20px;
      right:20px;
      bottom:20px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      border-radius:20px;
      background:rgba(15,23,42,.62);
      backdrop-filter:blur(16px);
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
    }

    .vf-live-overlay strong{
      display:block;
      font-size:13px;
      letter-spacing:.12em;
      opacity:.9;
      text-transform:uppercase;
    }

    .vf-live-overlay span{
      font-size:14px;
      opacity:.92;
      display:block;
      margin-top:6px;
      line-height:1.45;
    }

    .vf-live-status{
      flex-shrink:0;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:800;
      color:#d1fae5;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(16,185,129,.18);
      border:1px solid rgba(167,243,208,.22);
    }

    .vf-live-status::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:#22c55e;
      box-shadow:0 0 16px #22c55e;
      animation:vfBlink 1.2s infinite;
    }

    @keyframes vfBlink{
      0%,100%{ opacity:.35; transform:scale(.85); }
      50%{ opacity:1; transform:scale(1.15); }
    }

    .vf-live-card.is-pulse{
      animation:vfLivePulse .55s ease;
    }

    @keyframes vfLivePulse{
      0%{
        transform:scale(.985);
        filter:saturate(.8);
      }
      100%{
        transform:scale(1);
        filter:saturate(1);
      }
    }
    
    .vf-live-overlay{
      position:absolute;
      left:20px;
      bottom:20px;
      z-index:3;
      padding:18px 22px;
      border-radius:18px;
      background:rgba(20,20,20,.58);
      backdrop-filter:blur(14px);
      color:#fff;
    }

    .vf-live-overlay strong{
      display:block;
      font-size:14px;
      letter-spacing:.02em;
      opacity:.9;
    }

    .vf-live-overlay span{
      font-size:14px;
      opacity:.9;
      display:block;
      margin-top:6px;
    }


    /* =========================================================
       TECH TAGS
    ========================================================= */
    .vf-tech-cards{
      display:flex;
      gap:16px;
      margin-top:28px;
    }

    .vf-tech{
      flex:1;
      min-height:86px;
      padding:16px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(14px);
      text-align:center;
      font-size:13px;
      font-weight:650;
      color:#374151;
      box-shadow:0 10px 24px rgba(0,0,0,.08);
      border:1px solid rgba(255,255,255,.72);
      transition:.3s ease;
    }

    .vf-tech:hover{
      transform:translateY(-2px);
    }

    .vf-tech i{
      display:flex;
      align-items:center;
      justify-content:center;
      width:34px;
      height:34px;
      margin:0 auto 8px;
      border-radius:12px;
      background:color-mix(in srgb,var(--theme) 14%, white);
      font-size:16px;
      color:var(--theme);
    }

    /* =========================================================
       MODULE SWITCH
    ========================================================= */

    .vf-module-switch-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:28px;
    }

    .vf-module-switch{
      display:flex;
      align-items:center;
      gap:12px;
      padding:15px 16px;
      border-radius:18px;
      cursor:pointer;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.78);
      box-shadow:0 10px 24px rgba(15,23,42,.07);
      color:#334155;
      font-size:14px;
      font-weight:750;
      transition:.3s ease;
      user-select:none;
    }

    .vf-module-switch i{
      width:32px;
      height:32px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      color:var(--theme);
      background:color-mix(in srgb,var(--theme) 13%, white);
      transition:.3s ease;
    }

    .vf-module-switch:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(15,23,42,.12);
    }

    .vf-module-switch.is-active{
      color:#fff;
      background:linear-gradient(180deg,color-mix(in srgb,var(--theme) 88%,#fff),var(--theme));
      box-shadow:0 16px 36px var(--theme-shadow);
    }

    .vf-module-switch.is-active i{
      color:#fff;
      background:rgba(255,255,255,.24);
    }

    /* =========================================================
       RWD
    ========================================================= */

    @media(max-width:1100px){
      .vf-detail-grid{
        grid-template-columns:1fr;
        gap:64px;
      }
    }

    @media(max-width:720px){
      .vf-detail-glass{
        padding:88px 5vw;
      }

      .vf-detail-glass::after{
        display:none;
      }

      .vf-feature-buttons,
      .vf-module-switch-grid{
        grid-template-columns:1fr;
      }

      .vf-tech-cards{
        display:grid;
        grid-template-columns:1fr;
      }

      .vf-live-overlay{
        display:block;
      }

      .vf-live-status{
        width:max-content;
        margin-top:12px;
      }
    }


    .pill-outline {
      background: rgba(255, 255, 255, 0.08);
      color: #193cea;
      border: 1px solid rgba(255, 255, 255, 0.28);
      backdrop-filter: blur(12px);
    }

    .pill-outline:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.48);
      transform: translateY(-2px);
    }

/* ======================================================
   HOMEPAGE UX UPGRADE: BRAND GATEWAY + AI ASSISTANT  115.06.15
====================================================== */
.brand-gateway{
  margin:22px 0 34px;
  padding:22px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(232,240,255,.68));
  border:1px solid rgba(126,150,255,.18);
  box-shadow:0 18px 48px rgba(20,46,120,.14);
  position:relative;
  overflow:hidden;
}
.brand-gateway::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(82,113,255,.22),transparent 66%);
  pointer-events:none;
}
.brand-gateway__head{
  position:relative;
  z-index:1;
  display:grid;
  gap:6px;
  max-width:860px;
  margin-bottom:18px;
}
.brand-gateway__eyebrow{
  display:inline-flex;
  width:max-content;
  padding:5px 12px;
  border-radius:999px;
  color:#4f6cff;
  background:rgba(82,113,255,.10);
  border:1px solid rgba(82,113,255,.18);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.brand-gateway__head h2{
  margin:0;
  color:#0f172a;
  font-size:22px;
  line-height:1.35;
}
.brand-gateway__head p{
  margin:0;
  color:#5c6482;
  font-size:14px;
  line-height:1.72;
}
.brand-gateway__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.brand-mini-banner{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:142px;
  padding:18px;
  border-radius:24px;
  text-decoration:none;
  color:#eef5ff;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 42px rgba(8,18,56,.22);
}
.brand-mini-banner:hover,
.brand-mini-banner:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(8,18,56,.30);
  outline:none;
}
.brand-mini-banner--hirent{
  background:
    radial-gradient(circle at 88% 12%,rgba(109,246,255,.25),transparent 35%),
    linear-gradient(135deg,#081a42,#234dc7 58%,#62c7ff);
}
.brand-mini-banner--mfm{
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.25),transparent 35%),
    linear-gradient(135deg,#0b1537,#3840b8 55%,#8b65ff);
}
.brand-mini-banner__shine{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.18) 42%,transparent 60%);
  transform:translateX(-130%);
  transition:transform .65s ease;
  z-index:-1;
}
.brand-mini-banner:hover .brand-mini-banner__shine,
.brand-mini-banner:focus-visible .brand-mini-banner__shine{
  transform:translateX(130%);
}
.brand-mini-banner__icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px rgba(0,0,0,.20);
  font-size:22px;
}
.brand-mini-banner__body{
  min-width:0;
}
.brand-mini-banner__brand{
  display:block;
  color:#bfe7ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.brand-mini-banner h3{
  margin:0 0 6px;
  color:#fff;
  font-size:19px;
  line-height:1.25;
}
.brand-mini-banner p{
  margin:0;
  color:rgba(238,245,255,.82);
  font-size:13px;
  line-height:1.65;
}
.brand-mini-banner__cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  font-size:13px;
  color:#fff;
  font-weight:800;
}
.brand-mini-banner__tag{
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 9px;
  border-radius:999px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:10px;
  letter-spacing:.06em;
}

.ai-assistant-anchor{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:12px;
}
.ai-assistant-label{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  color:#17315f;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(127,171,255,.36);
  box-shadow:0 14px 34px rgba(20,46,120,.16);
  backdrop-filter:blur(12px);
  font-size:13px;
  font-weight:800;
}
.ai-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#35e1b8;
  box-shadow:0 0 0 6px rgba(53,225,184,.12),0 0 14px rgba(53,225,184,.65);
}
#hipower-ai-btn{
  position:relative;
  right:auto;
  bottom:auto;
  width:72px;
  height:72px;
  overflow:visible;
}
#hipower-ai-btn .ai-btn-ring{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(100,198,255,.42);
  animation:aiRingPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aiRingPulse{
  0%,100%{transform:scale(.94);opacity:.42;}
  50%{transform:scale(1.08);opacity:.92;}
}
#hipower-ai-btn.is-open{
  transform:scale(.92);
  opacity:.72;
}
#hipower-chat{
  width:460px;
  height:760px;
  max-height:calc(100vh - 32px);
  border-radius:26px;
  background:
    radial-gradient(circle at 70% -10%,rgba(84,135,255,.28),transparent 32%),
    linear-gradient(180deg,#07112a,#030915 72%,#030712);
}
.chat-header{
  padding:15px 16px;
}
.brand-copy{
  display:grid;
  gap:2px;
}
.brand-copy strong{
  font-size:16px;
  color:#fff;
  line-height:1.2;
}
.brand-copy small{
  color:#9eb9ff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}
.chat-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-icon-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#d6e2fb;
  cursor:pointer;
  display:grid;
  place-items:center;
  font:inherit;
  transition:.2s ease;
}
.chat-icon-btn:hover{
  background:rgba(134,186,255,.16);
  color:#fff;
}
#closeChat.chat-icon-btn{
  font-size:26px;
  line-height:1;
}
.chat-hero{
  padding:18px 20px 12px;
}
.chat-hero-icon{
  width:70px;
  height:70px;
  margin-bottom:12px;
  background:radial-gradient(circle at 34% 22%,#ffffff,#7eb8ff 30%,#3868ff 74%);
  color:#07101e;
}
.chat-hero h2{
  font-size:20px;
}
.chat-hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.chat-starter{
  border:1px solid rgba(134,186,255,.22);
  background:rgba(134,186,255,.10);
  color:#e9f2ff;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.chat-starter:hover{
  background:rgba(134,186,255,.22);
  transform:translateY(-1px);
}
.chat-progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0 14px 10px;
}
.chat-progress span{
  position:relative;
  text-align:center;
  padding:7px 6px;
  border-radius:999px;
  color:#8ba6d8;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
}
.chat-progress span.is-active,
.chat-progress span.is-done{
  color:#07101e;
  background:linear-gradient(180deg,#a7d0ff,#70a7ff);
}
#chatBody{
  padding:12px 14px;
}
.msg.typing{
  display:inline-flex;
  gap:4px;
  align-items:center;
  width:max-content;
}
.msg.typing i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bcd7ff;
  animation:typingDot 1s ease-in-out infinite;
}
.msg.typing i:nth-child(2){animation-delay:.15s;}
.msg.typing i:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{
  0%,80%,100%{opacity:.35;transform:translateY(0);}
  40%{opacity:1;transform:translateY(-3px);}
}
.summary-box{
  position:relative;
  overflow:hidden;
}
.summary-box::before{
  content:"需求摘要";
  display:inline-flex;
  margin-bottom:8px;
  padding:3px 8px;
  border-radius:999px;
  color:#061229;
  background:#9bd0ff;
  font-size:11px;
  font-weight:900;
}
.lead-form{
  gap:10px;
}
.lead-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.lead-form label{
  color:#d8e7ff;
  font-size:12px;
  font-weight:800;
  display:grid;
  gap:5px;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  border-color:rgba(126,183,255,.72);
  box-shadow:0 0 0 3px rgba(126,183,255,.12);
}
.lead-form .form-error{
  color:#ffd0d0;
  font-size:12px;
  line-height:1.5;
  display:none;
}
.lead-form.is-invalid .form-error{
  display:block;
}
.quick-menu button:hover{
  background:rgba(134,186,255,.18);
  transform:translateY(-1px);
}
.quick-menu button.active svg{
  color:#08101c;
}
.chat-input input{
  background:rgba(255,255,255,.13);
}
.tip{
  text-align:center;
}
@media (max-width:900px){
  .brand-gateway{
    padding:18px;
    border-radius:24px;
  }
  .brand-gateway__grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .brand-gateway__head h2{
    font-size:19px;
  }
  .brand-mini-banner{
    grid-template-columns:1fr;
    min-height:auto;
    padding:17px;
  }
  .brand-mini-banner__tag{
    position:static;
    width:max-content;
    margin-top:10px;
  }
  .ai-assistant-anchor{
    right:16px;
    bottom:16px;
  }
  .ai-assistant-label{
    display:none;
  }
  #hipower-chat{
    right:8px;
    left:8px;
    width:auto;
    height:calc(100vh - 16px);
    max-height:none;
    bottom:8px;
    border-radius:22px;
  }
  .lead-form .form-row{
    grid-template-columns:1fr;
  }
  .chat-progress{
    gap:5px;
  }
  .quick-menu{
    gap:6px;
    padding:10px;
  }
  .quick-menu button{
    min-height:56px;
  }
}


/* ======================================================
   Brand Gateway Mini Banners  115.06.15
====================================================== */
.brand-gateway-mini{
  position:relative;
  margin:28px auto 20px;
  padding:26px 28px;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(102, 211, 255, .24), transparent 30%),
    radial-gradient(circle at 92% 20%, rgba(126, 149, 255, .26), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,244,255,.72));
  border:1px solid rgba(120,140,255,.22);
  box-shadow:0 20px 48px rgba(40, 66, 150, .14);
}

.brand-gateway-mini::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(120,150,255,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,255,.10) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.55;
  pointer-events:none;
}

.brand-gateway-mini__head{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:820px;
  margin:0 auto 20px;
}

.brand-gateway-mini__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5271ff;
  background:rgba(82,113,255,.10);
  border:1px solid rgba(82,113,255,.18);
}

.brand-gateway-mini__head h2{
  margin:0 0 8px;
  color:#10162f;
  font-size:24px;
  line-height:1.3;
  letter-spacing:.02em;
}

.brand-gateway-mini__head p{
  margin:0;
  color:#5c6482;
  font-size:14px;
  line-height:1.7;
}

.brand-gateway-mini__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.brand-mini-card{
  position:relative;
  min-height:142px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:20px;
  border-radius:24px;
  color:#eef5ff;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 18px 42px rgba(14, 28, 84, .18);
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.brand-mini-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(135deg, #071235, #172a72);
}

.brand-mini-card--hirent::before{
  background:
    radial-gradient(circle at 12% 12%, rgba(84, 236, 255, .42), transparent 32%),
    linear-gradient(135deg, #071235 0%, #123a86 54%, #1c66a8 100%);
}

.brand-mini-card--mfm::before{
  background:
    radial-gradient(circle at 18% 12%, rgba(151, 126, 255, .44), transparent 34%),
    linear-gradient(135deg, #08122f 0%, #27306f 52%, #4b5cff 100%);
}

.brand-mini-card__glow{
  position:absolute;
  inset:-40% auto auto -20%;
  width:180px;
  height:180px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
  filter:blur(34px);
  opacity:.58;
  pointer-events:none;
}

.brand-mini-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 40%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}

.brand-mini-card:hover,
.brand-mini-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 24px 56px rgba(34, 66, 180, .30);
  outline:none;
}

.brand-mini-card:hover::after,
.brand-mini-card:focus-visible::after{
  transform:translateX(120%);
}

.brand-mini-card__icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(0,0,0,.18);
  color:#ffffff;
  font-size:22px;
  flex:0 0 auto;
}

.brand-mini-card__content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.brand-mini-card__content strong{
  font-size:18px;
  font-weight:800;
  letter-spacing:.02em;
  color:#ffffff;
}

.brand-mini-card__content em{
  font-style:normal;
  font-size:14px;
  font-weight:700;
  color:#dfe8ff;
}

.brand-mini-card__content small{
  font-size:12px;
  line-height:1.6;
  color:rgba(239,246,255,.78);
}

.brand-mini-card__action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
}

@media (max-width:900px){
  .brand-gateway-mini{
    margin:20px auto 12px;
    padding:22px 18px;
    border-radius:24px;
  }

  .brand-gateway-mini__grid{
    grid-template-columns:1fr;
  }

  .brand-mini-card{
    min-height:auto;
    grid-template-columns:auto 1fr;
    padding:18px;
  }

  .brand-mini-card__action{
    grid-column:1 / -1;
    justify-content:center;
  }
}

@media (max-width:520px){
  .brand-gateway-mini__head h2{
    font-size:20px;
  }

  .brand-mini-card__icon{
    width:46px;
    height:46px;
    border-radius:16px;
  }

  .brand-mini-card__content strong{
    font-size:16px;
  }
}

/* ======================================================
   Architecture UX v2 - ViDA.ai Data Platform Dynamic Map  115.06.15
====================================================== */
.arch-v2-section{
  position:relative;
  margin-top:90px;
}

.arch-v2-card{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:30px;
  border-radius:36px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.95),rgba(233,239,255,.78) 38%,rgba(214,225,255,.72) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 34px 90px rgba(45,65,150,.22);
  isolation:isolate;
}

.arch-v2-bg-grid{
  position:absolute;
  inset:0;
  opacity:.44;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(126,150,230,.24) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(126,150,230,.20) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,#000 0%,transparent 78%);
}

.arch-v2-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(118,142,230,.16);
  pointer-events:none;
}

.arch-v2-card::after{
  content:"";
  position:absolute;
  width:46%;
  height:46%;
  left:30%;
  top:12%;
  border-radius:999px;
  background:radial-gradient(circle,rgba(112,132,255,.32),rgba(112,132,255,0) 68%);
  filter:blur(18px);
  animation:archV2GlowMove 8s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}

@keyframes archV2GlowMove{
  0%,100%{transform:translate(-8%,0) scale(1);opacity:.62;}
  50%{transform:translate(8%,8%) scale(1.15);opacity:.95;}
}

.arch-v2-orbit{
  position:absolute;
  left:50%;
  top:42%;
  border-radius:50%;
  border:1px dashed rgba(105,128,230,.22);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.arch-v2-orbit-1{width:420px;height:420px;animation:archV2Orbit 18s linear infinite;}
.arch-v2-orbit-2{width:300px;height:300px;animation:archV2Orbit 12s linear infinite reverse;}
@keyframes archV2Orbit{to{transform:translate(-50%,-50%) rotate(360deg);}}

.arch-v2-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.arch-v2-path{
  fill:none;
  stroke:url(#archV2LineGrad);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:10 16;
  opacity:.85;
  filter:url(#archV2Glow);
  animation:archV2Dash 3.4s linear infinite;
}
.path-service{animation-delay:.3s;}
.path-model{animation-delay:.7s;}
.path-app{animation-delay:1.1s;}
.path-data{animation-delay:1.5s;opacity:.55;}
@keyframes archV2Dash{to{stroke-dashoffset:-90;}}

.arch-v2-flow span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:8px;
  height:8px;
  border-radius:999px;
  background:#eef8ff;
  box-shadow:0 0 0 8px rgba(106,207,255,.12),0 0 24px rgba(106,207,255,.9);
  z-index:2;
  animation:archV2DataPulse 2.8s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes archV2DataPulse{
  0%,100%{transform:scale(.65);opacity:.24;}
  45%{transform:scale(1.25);opacity:1;}
}

.arch-v2-stage{
  position:relative;
  z-index:3;
  min-height:510px;
}

.arch-v2-node{
  position:absolute;
  width:min(30%,310px);
  min-height:118px;
  padding:18px;
  border:0;
  border-radius:26px;
  text-align:left;
  cursor:pointer;
  color:#17213f;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,249,255,.70));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 20px 52px rgba(54,73,150,.18),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:start;
  transition:transform .34s ease,box-shadow .34s ease,border-color .34s ease,background .34s ease;
}
.arch-v2-node:hover,
.arch-v2-node.is-active{
  transform:translateY(-8px) scale(1.018);
  border-color:rgba(111,124,255,.48);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,246,255,.84));
  box-shadow:0 28px 72px rgba(55,80,180,.28),0 0 0 1px rgba(111,124,255,.18) inset;
}
.arch-v2-node:focus-visible{
  outline:3px solid rgba(86,113,255,.38);
  outline-offset:4px;
}
.arch-v2-edge{left:2%;top:33%;}
.arch-v2-service{left:35%;top:2%;}
.arch-v2-model{left:35%;bottom:2%;}
.arch-v2-app{right:2%;top:33%;}

.arch-v2-node-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-size:22px;
  background:linear-gradient(135deg,#5271ff,#72d5ff);
  box-shadow:0 14px 30px rgba(82,113,255,.34);
  position:relative;
  overflow:hidden;
}
.arch-v2-node-icon::after{
  content:"";
  position:absolute;
  inset:-55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:rotate(28deg) translateX(-120%);
  animation:archV2IconShine 4s ease-in-out infinite;
}
@keyframes archV2IconShine{
  0%,55%{transform:rotate(28deg) translateX(-120%);}
  75%,100%{transform:rotate(28deg) translateX(120%);}
}
.arch-v2-node-copy strong{
  display:block;
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
}
.arch-v2-node-copy small{
  display:block;
  margin-top:4px;
  color:#6a7398;
  font-weight:800;
  letter-spacing:.04em;
}
.arch-v2-mini-icons{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:6px;
}
.arch-v2-mini-icons i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#6270e8;
  background:rgba(239,243,255,.82);
  border:1px solid rgba(114,136,230,.16);
  animation:archV2MiniFloat 3.8s ease-in-out infinite;
}
.arch-v2-mini-icons i:nth-child(2){animation-delay:.35s;}
.arch-v2-mini-icons i:nth-child(3){animation-delay:.7s;}
@keyframes archV2MiniFloat{
  0%,100%{transform:translateY(0);opacity:.78;}
  50%{transform:translateY(-4px);opacity:1;}
}

.arch-v2-core{
  position:absolute;
  left:50%;
  top:50%;
  width:270px;
  min-height:238px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:8px 20px;
  border-radius:42px;
  color:#fff;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.72),rgba(139,164,255,.78) 36%,rgba(82,113,255,.95) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 32px 86px rgba(65,88,210,.52),inset 0 1px 0 rgba(255,255,255,.75);
  z-index:4;
  animation:archV2CoreFloat 4.5s ease-in-out infinite;
}
@keyframes archV2CoreFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-8px);}
}
.arch-v2-core-ring{
  position:absolute;
  inset:-26px;
  border-radius:52px;
  border:1px dashed rgba(255,255,255,.54);
  animation:archV2CoreSpin 12s linear infinite;
}
@keyframes archV2CoreSpin{to{transform:rotate(360deg);}}
.arch-v2-core-brain{
  position:relative;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:28px;
  color:#5271ff;
  font-size:38px;
  background:rgba(255,255,255,.85);
  box-shadow:0 18px 38px rgba(25,42,130,.24);
}
.core-pulse{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#7ee7ff;
  box-shadow:0 0 18px rgba(126,231,255,.95);
  animation:archV2PulseDot 2.4s ease-in-out infinite;
}
.core-pulse.p1{left:10px;top:18px;}
.core-pulse.p2{right:12px;top:28px;animation-delay:.45s;}
.core-pulse.p3{left:42px;bottom:12px;animation-delay:.85s;}
@keyframes archV2PulseDot{
  0%,100%{transform:scale(.7);opacity:.4;}
  50%{transform:scale(1.35);opacity:1;}
}
.arch-v2-core h3{
  margin:0;
  font-size:26px;
  font-weight:950;
  letter-spacing:.01em;
}
.arch-v2-core p{
  margin:8px 0 12px;
  font-size:13px;
  line-height:1.6;
  font-weight:800;
  opacity:.94;
}
.arch-v2-core > span{
  display:inline-flex;
  padding:7px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  background:rgba(8,18,52,.78);
  border:1px solid rgba(255,255,255,.35);
}

.arch-v2-panel{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:18px;
  margin-top:20px;
}
.arch-v2-insight,
.arch-v2-app-grid article{
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 18px 45px rgba(55,76,160,.14),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
}
.arch-v2-insight{
  padding:20px 22px;
  min-height:190px;
}
.arch-v2-panel-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border-radius:999px;
  color:#5467e9;
  background:rgba(237,242,255,.9);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.arch-v2-insight h3{
  margin:12px 0 8px;
  font-size:20px;
  color:#17213f;
}
.arch-v2-insight p{
  margin:0;
  color:#596382;
  line-height:1.75;
  font-size:14px;
  font-weight:700;
}
.arch-v2-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.arch-v2-tags span{
  padding:6px 10px;
  border-radius:999px;
  color:#4051c8;
  background:linear-gradient(135deg,#eef3ff,#fff);
  border:1px solid rgba(94,116,222,.15);
  font-size:12px;
  font-weight:900;
}
.arch-v2-app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.arch-v2-app-grid article{
  padding:15px;
  display:grid;
  gap:6px;
  transition:transform .28s ease,box-shadow .28s ease;
}
.arch-v2-app-grid article:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(55,76,160,.22);
}
.arch-v2-app-grid i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#5b72ff,#89dfff);
  box-shadow:0 10px 24px rgba(82,113,255,.25);
}
.arch-v2-app-grid strong{
  color:#182342;
  font-size:15px;
}
.arch-v2-app-grid span{
  color:#63708f;
  font-size:12px;
  line-height:1.45;
  font-weight:750;
}

.arch-v2-card.is-visible .arch-v2-node{
  animation:archV2NodeIn .72s cubic-bezier(.2,1.1,.3,1) both;
}
.arch-v2-card.is-visible .arch-v2-service{animation-delay:.08s;}
.arch-v2-card.is-visible .arch-v2-app{animation-delay:.16s;}
.arch-v2-card.is-visible .arch-v2-model{animation-delay:.24s;}
@keyframes archV2NodeIn{
  from{opacity:0;transform:translateY(22px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@media(max-width:980px){
  .arch-v2-card{padding:24px;}
  .arch-v2-stage{min-height:auto;display:grid;gap:14px;padding-top:18px;}
  .arch-v2-node,
  .arch-v2-edge,
  .arch-v2-service,
  .arch-v2-model,
  .arch-v2-app,
  .arch-v2-core{
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;
    width:100%;
    transform:none;
  }
  .arch-v2-core{
    order:-1;
    width:min(100%,320px);
    margin:0 auto 8px;
  }
  .arch-v2-core:hover,
  .arch-v2-node:hover,
  .arch-v2-node.is-active{
    transform:translateY(-3px);
  }
  .arch-v2-lines,
  .arch-v2-orbit,
  .arch-v2-flow{display:none;}
  .arch-v2-panel{grid-template-columns:1fr;}
  .arch-v2-app-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:620px){
  .arch-v2-card{padding:18px;border-radius:28px;}
  .arch-v2-card::before{inset:10px;border-radius:22px;}
  .arch-v2-node{grid-template-columns:46px 1fr;padding:14px;border-radius:20px;}
  .arch-v2-node-icon{width:46px;height:46px;border-radius:15px;font-size:19px;}
  .arch-v2-node-copy strong{font-size:15px;}
  .arch-v2-core{min-height:210px;border-radius:30px;}
  .arch-v2-app-grid{grid-template-columns:1fr;}
}


/* ======================================================
   HiPower AI Assistant - Required Lead Form UX  115.06.15
====================================================== */
.lead-form .required-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:9px 10px;
  border-radius:14px;
  background:rgba(126,183,255,.12);
  border:1px solid rgba(126,183,255,.22);
  color:#dcecff;
  font-size:12px;
  line-height:1.45;
  font-weight:800;
}
.lead-form .required-note span,
.lead-form label em{
  color:#8edcff;
  font-style:normal;
  font-weight:950;
}
.lead-form .privacy-note{
  color:#9eb6d8;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}
.lead-form input.is-field-invalid,
.lead-form textarea.is-field-invalid,
.lead-form select.is-field-invalid{
  border-color:#ff9a9a !important;
  box-shadow:0 0 0 3px rgba(255,110,110,.16),0 0 18px rgba(255,110,110,.12) !important;
}
.lead-form input[aria-invalid="true"]{
  background:rgba(255,110,110,.10);
}
.lead-form.is-invalid .form-error{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,110,110,.12);
  border:1px solid rgba(255,160,160,.25);
}


/* ===== Architecture UX v3 patch appended ===== */
/* ======================================================
   Architecture UX v3 patch
   - precise connector alignment
   - stronger motion / interaction / depth
====================================================== */
.arch-v2-card{
  --arch-mx: 0;
  --arch-my: 0;
}

.arch-v2-bg-grid{
  animation: archV2GridDrift 16s linear infinite;
}
@keyframes archV2GridDrift{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(8px, 6px); }
  100%{ transform: translate(0,0); }
}

.arch-v2-card::after{
  transform: translate(calc(var(--arch-mx) * 18px), calc(var(--arch-my) * 18px));
}

.arch-v2-stage{
  transform: translate3d(calc(var(--arch-mx) * 8px), calc(var(--arch-my) * 8px), 0);
  transition: transform .28s ease;
}

.arch-v2-lines{
  overflow: visible;
}

.arch-v2-path{
  stroke-width: 2.25;
  opacity: .62;
  transition: stroke-width .3s ease, opacity .3s ease;
}

.arch-v2-card[data-active-node="edge"] .path-edge,
.arch-v2-card[data-active-node="service"] .path-service,
.arch-v2-card[data-active-node="model"] .path-model,
.arch-v2-card[data-active-node="app"] .path-app{
  stroke-width: 3.6;
  opacity: 1;
}

.arch-v2-endpoint,
.arch-v2-live-dot{
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.arch-v2-endpoint{
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: #f8fbff;
  box-shadow:
    0 0 0 7px rgba(111,124,255,.12),
    0 0 24px rgba(111,124,255,.52);
  animation: archV2EndpointBlink 2.8s ease-in-out infinite;
}
@keyframes archV2EndpointBlink{
  0%,100%{ transform: scale(.95); opacity: .9; }
  50%{ transform: scale(1.18); opacity: 1; }
}

.arch-v2-live-dot{
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: linear-gradient(135deg,#ffffff,#90ecff);
  box-shadow:
    0 0 0 8px rgba(108,207,255,.10),
    0 0 28px rgba(108,207,255,.95);
  animation: archV2LiveDot 2.8s ease-in-out infinite;
  animation-delay: var(--d,0s);
}
@keyframes archV2LiveDot{
  0%,100%{ transform: scale(.6); opacity: .22; }
  45%{ transform: scale(1.25); opacity: 1; }
}

.arch-v2-node{
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.arch-v2-node:hover,
.arch-v2-node.is-active{
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-8px)
    scale(1.018);
}

.arch-v2-node::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.95), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity: .65;
  pointer-events: none;
}

.arch-v2-node::after{
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  right: -18px;
  bottom: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,124,255,.18), rgba(111,124,255,0) 72%);
  filter: blur(3px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.arch-v2-node:hover::after,
.arch-v2-node.is-active::after{
  opacity: 1;
}

.arch-v2-mini-icons i{
  box-shadow: 0 8px 18px rgba(98,112,232,.08);
}

.arch-v2-core{
  transition: box-shadow .35s ease, transform .35s ease;
}

.arch-v2-card[data-active-node="edge"] .arch-v2-core,
.arch-v2-card[data-active-node="service"] .arch-v2-core,
.arch-v2-card[data-active-node="model"] .arch-v2-core,
.arch-v2-card[data-active-node="app"] .arch-v2-core{
  box-shadow: 0 36px 100px rgba(65,88,210,.62), 0 0 0 1px rgba(255,255,255,.45) inset;
}

.arch-v2-core-ring::after{
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  border: 1px dashed rgba(255,255,255,.26);
  animation: archV2CoreSpin 8s linear infinite reverse;
}

.arch-v2-core-brain{
  overflow: hidden;
}

.arch-v2-core-brain::after{
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: rotate(22deg) translateX(-120%);
  animation: archV2BrainShine 4.6s ease-in-out infinite;
}
@keyframes archV2BrainShine{
  0%,55%{ transform: rotate(22deg) translateX(-120%); }
  75%,100%{ transform: rotate(22deg) translateX(140%); }
}

.arch-v2-insight{
  position: relative;
  overflow: hidden;
}
.arch-v2-insight::after{
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,124,255,.18), rgba(111,124,255,0) 72%);
  pointer-events: none;
}

.arch-v2-tags span{
  transition: transform .24s ease, box-shadow .24s ease;
}
.arch-v2-tags span:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(94,116,222,.10);
}

.arch-v2-app-grid article{
  position: relative;
  overflow: hidden;
}

.arch-v2-app-grid article::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: .9;
  pointer-events: none;
}

.arch-v2-app-grid article::after{
  content: "";
  position: absolute;
  inset: auto -35% -45% auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,220,255,.20), rgba(120,220,255,0) 72%);
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0;
}

.arch-v2-app-grid article:hover::after{
  transform: translate(-10px,-10px);
  opacity: 1;
}

@media(max-width:980px){
  .arch-v2-endpoint,
  .arch-v2-live-dot{ display: none !important; }
  .arch-v2-stage{ transform: none; }
}


/* ===== Architecture RWD fix appended ===== */
/* ======================================================
   Architecture RWD Fix
   Fix mobile / tablet overflow of ViDA.ai center core
====================================================== */

/* Tablet: tighten spacing and keep the layout balanced */
@media (max-width: 1180px){
  .arch-v2-card{
    padding:24px;
    border-radius:30px;
  }

  .arch-v2-stage{
    min-height:480px;
  }

  .arch-v2-node{
    width:min(32%, 290px);
  }

  .arch-v2-core{
    width:min(36vw, 250px);
    min-height:220px;
    padding:22px 18px;
  }
}

/* Main responsive switch */
@media (max-width: 980px){
  .section-architecture{
    margin-top:64px;
  }

  .arch-v2-card{
    padding:20px;
    border-radius:28px;
  }

  .arch-v2-card::before{
    inset:12px;
    border-radius:22px;
  }

  .arch-v2-stage{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding-top:10px;
    transform:none !important;
  }

  .arch-v2-node,
  .arch-v2-edge,
  .arch-v2-service,
  .arch-v2-model,
  .arch-v2-app{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none;
    min-height:auto;
    transform:none !important;
  }

  /* Critical fix: prevent center core from keeping desktop translate animation */
  .arch-v2-core{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    animation:none !important;
    order:-1;
    width:min(100%, 360px) !important;
    min-height:210px;
    margin:0 auto 10px;
    padding:22px 18px;
    justify-self:center;
  }

  .arch-v2-core:hover,
  .arch-v2-node:hover,
  .arch-v2-node.is-active{
    transform:translateY(-3px) !important;
  }

  .arch-v2-core-ring{
    inset:-14px;
  }

  .arch-v2-lines,
  .arch-v2-orbit,
  .arch-v2-flow,
  .arch-v2-endpoint,
  .arch-v2-live-dot{
    display:none !important;
  }

  .arch-v2-panel{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:14px;
  }

  .arch-v2-app-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .arch-v2-section{
    margin-top:56px;
  }

  .arch-v2-card{
    padding:16px;
    border-radius:24px;
  }

  .arch-v2-card::before{
    inset:10px;
    border-radius:18px;
  }

  .arch-v2-bg-grid{
    opacity:.26;
    background-size:40px 40px;
  }

  .arch-v2-node{
    grid-template-columns:48px 1fr;
    gap:12px;
    padding:14px;
    border-radius:20px;
  }

  .arch-v2-node-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    font-size:20px;
  }

  .arch-v2-node-copy strong{
    font-size:15px;
    line-height:1.3;
  }

  .arch-v2-node-copy small{
    font-size:11px;
    margin-top:3px;
  }

  .arch-v2-mini-icons{
    gap:6px;
    padding-top:4px;
  }

  .arch-v2-mini-icons i{
    width:28px;
    height:28px;
    border-radius:10px;
    font-size:13px;
  }

  .arch-v2-core{
    width:100% !important;
    max-width:320px;
    min-height:190px;
    border-radius:28px;
    padding:18px 16px;
  }

  .arch-v2-core h3{
    font-size:1.8rem;
    line-height:1.1;
    margin-top:2px;
  }

  .arch-v2-core p{
    font-size:.92rem;
    line-height:1.5;
    margin-bottom:10px;
  }

  .arch-v2-core > span{
    font-size:11px;
    padding:7px 10px;
    line-height:1.35;
  }

  .arch-v2-core-brain{
    width:74px;
    height:74px;
    font-size:34px;
    border-radius:24px;
    margin-bottom:8px;
  }

  .arch-v2-insight{
    padding:16px 16px 18px;
    min-height:auto;
    border-radius:20px;
  }

  .arch-v2-panel-kicker{
    font-size:11px;
    letter-spacing:.05em;
  }

  .arch-v2-insight h3{
    margin:10px 0 8px;
    font-size:18px;
    line-height:1.35;
  }

  .arch-v2-insight p{
    font-size:13px;
    line-height:1.7;
  }

  .arch-v2-tags span{
    font-size:11px;
    padding:6px 9px;
  }

  .arch-v2-app-grid article{
    padding:13px;
    border-radius:18px;
  }

  .arch-v2-app-grid strong{
    font-size:14px;
  }

  .arch-v2-app-grid span{
    font-size:11px;
  }
}

/* Narrow mobile */
@media (max-width: 520px){
  .arch-v2-app-grid{
    grid-template-columns:1fr;
  }

  .arch-v2-core{
    max-width:100%;
  }

  .section-architecture .section-title-gradient{
    line-height:1.15;
  }

  .section-architecture .section-desc{
    font-size:14px;
    line-height:1.75;
    padding-inline:8px;
  }
}

/* Ultra narrow phones */
@media (max-width: 390px){
  .arch-v2-card{
    padding:14px;
  }

  .arch-v2-node{
    padding:13px;
    grid-template-columns:44px 1fr;
  }

  .arch-v2-node-icon{
    width:44px;
    height:44px;
    font-size:18px;
  }

  .arch-v2-core{
    min-height:178px;
    padding:16px 14px;
  }

  .arch-v2-core h3{
    font-size:1.6rem;
  }

  .arch-v2-core p{
    font-size:.86rem;
  }

  .arch-v2-core > span{
    font-size:10px;
  }
}