:root{
      --bg:#070b14;
      --panel:#0f1730;
      --text:#eaf0ff;
      --muted:#a9b7d6;
      --line:rgba(255,255,255,.10);
      --line2:rgba(255,255,255,.14);
      --glow: rgba(110,231,255,.22);
      --glow2: rgba(167,139,250,.20);
      --glow3: rgba(34,211,238,.16);
      --radius:18px;
      --shadow: 0 18px 55px rgba(0,0,0,.45);
      --shadow2: 0 10px 35px rgba(0,0,0,.40);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans TC","PingFang TC","Microsoft JhengHei", sans-serif;
      background:
        radial-gradient(1200px 700px at 20% -10%, var(--glow), transparent 60%),
        radial-gradient(900px 600px at 90% 10%, var(--glow2), transparent 55%),
        linear-gradient(180deg, #050814, var(--bg));
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    .hidden{display:none !important}
    .wrap{max-width:1120px;margin:0 auto;padding:0 18px}

    /* ===== NAV ===== */
    .nav{
      position:sticky; top:0; z-index:50;
      background: rgba(7,11,20,.62);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav .inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0; gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900; letter-spacing:.4px;
    }
    .logo{
      width:34px;height:34px;border-radius:12px;
      background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
      box-shadow: 0 12px 22px rgba(110,231,255,.16);
      position:relative;
      overflow:hidden;
    }
    .logo::after{
      content:"";
      position:absolute; inset:-40%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 45%);
      transform: rotate(25deg);
      opacity:.5;
      animation: floatGlow 6s ease-in-out infinite;
    }

    .menu{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center;
    }
    .menu a, .menu button{
      padding:8px 10px; border-radius:12px;
      color:var(--muted);
      border:1px solid transparent;
      background: transparent;
      cursor:pointer;
      font: inherit;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    }
    .menu a:hover, .menu button:hover{
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.10);
      color:var(--text);
      transform: translateY(-1px);
    }

    /* ===== HERO (header with container image) ===== */
    header.hero{
      padding: 34px 0 28px;
      position:relative;
      isolation:isolate;
    }

    /* Background image layer */
    header.hero::before{
      content:"";
      position:absolute;
      inset:0;
      /* Keep the container image visible across the whole banner */
      background:
        linear-gradient(180deg,
          rgba(7,11,20,.12) 0%,
          rgba(7,11,20,.40) 45%,
          rgba(7,11,20,.68) 100%
        ),
        url("../pictures/header.png") center/cover no-repeat;
      filter: saturate(1.08) contrast(1.05);
      z-index:-3;
    }

    /* Grid / blueprint layer */
    header.hero::after{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 56px 56px;
      opacity:.12;
      mask-image: radial-gradient(circle at 30% 25%, rgba(0,0,0,1), rgba(0,0,0,.25) 55%, transparent 74%);
      z-index:-2;
      pointer-events:none;
    }

    /* Scanlines overlay */
    .scanlines{
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.045),
        rgba(255,255,255,.045) 1px,
        transparent 1px,
        transparent 7px
      );
      opacity:.06;
      z-index:-1;
      pointer-events:none;
    }

    /* Moving light sweep */
    .sweep{
      position:absolute;
      inset:-40% -30%;
      background:
        radial-gradient(circle at 30% 20%, rgba(110,231,255,.18), transparent 45%),
        radial-gradient(circle at 70% 35%, rgba(167,139,250,.16), transparent 50%),
        radial-gradient(circle at 55% 70%, rgba(34,211,238,.12), transparent 55%);
      transform: rotate(12deg);
      animation: sweep 10s ease-in-out infinite;
      z-index:-1;
      pointer-events:none;
      mix-blend-mode: screen;
      opacity:.85;
    }

    @keyframes sweep{
      0%{ transform: translate3d(-2%, -2%, 0) rotate(12deg); }
      50%{ transform: translate3d(2%, 3%, 0) rotate(12deg); }
      100%{ transform: translate3d(-2%, -2%, 0) rotate(12deg); }
    }
    @keyframes floatGlow{
      0%{ transform: translate3d(-2%, -2%, 0) rotate(25deg); opacity:.45; }
      50%{ transform: translate3d(2%, 3%, 0) rotate(25deg); opacity:.6; }
      100%{ transform: translate3d(-2%, -2%, 0) rotate(25deg); opacity:.45; }
    }

    .heroGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:16px;
      align-items:stretch;
      padding-top: 30px;
    }
    @media (max-width: 920px){
      .heroGrid{grid-template-columns:1fr}
    }

    .panel{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      padding:24px;
      position:relative;
      overflow:hidden;
      backdrop-filter: blur(10px);
    }

    /* Neon edge */
    .panel::before{
      content:"";
      position:absolute; inset:0;
      border-radius: var(--radius);
      padding:1px;
      background: linear-gradient(135deg, rgba(110,231,255,.35), rgba(167,139,250,.25), rgba(255,255,255,.10));
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity:.65;
      pointer-events:none;
    }
    .panel::after{
      content:"";
      position:absolute; inset:-40% -30%;
      background:
        radial-gradient(circle at 30% 20%, rgba(110,231,255,.18), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(167,139,250,.16), transparent 48%);
      pointer-events:none;
      opacity:.9;
    }

    .bigTitle{
      margin:0 0 10px;
      font-weight:950;
      letter-spacing: .8px;
      font-size: clamp(34px, 5.6vw, 60px);
      line-height:1.05;
      background: linear-gradient(135deg, rgba(110,231,255,.98), rgba(167,139,250,.95));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      text-shadow: 0 0 26px rgba(110,231,255,.12);
    }
    .lead{
      margin:0 0 16px;
      color:var(--muted);
      font-size:16px;
      max-width: 82ch;
      line-height:1.75;
    }

    .ctaRow{
      display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px; border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      font-weight:800;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,.20);
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.20);
      box-shadow: 0 14px 36px rgba(0,0,0,.32);
    }
    .btn.primary{
      border:none;
      color:#06101c;
      background: linear-gradient(135deg, rgba(110,231,255,.98), rgba(167,139,250,.95));
      box-shadow: 0 18px 55px rgba(110,231,255,.10);
      position:relative;
      overflow:hidden;
    }
    .btn.primary::after{
      content:"";
      position:absolute; inset:-50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%);
      transform: rotate(18deg);
      opacity:.35;
      animation: sweep 8s ease-in-out infinite;
      pointer-events:none;
    }

    section{padding:34px 0}
    .sectionTitle{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px; flex-wrap:wrap; margin-bottom:14px;
    }
    .sectionTitle h2{margin:0;font-size:26px}
    .sectionTitle p{margin:0;color:var(--muted)}

    .cards{
      display:grid; gap:14px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 920px){
      .cards{grid-template-columns:1fr}
    }
    .card{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: rgba(15,23,48,.55);
      box-shadow: var(--shadow2);
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute; inset:-80% -60%;
      background: radial-gradient(circle at 40% 50%, rgba(110,231,255,.12), transparent 55%);
      opacity:.8;
      pointer-events:none;
    }
    .card h3{margin:0 0 8px;font-size:18px}
    .card p{margin:0;color:var(--muted);line-height:1.65}

    .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
    .tag{
      font-size:12px;
      color:var(--muted);
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }

    footer{
      padding:26px 0 46px;
      border-top:1px solid var(--line);
      color:var(--muted);
    }

    /* accessibility / reduce motion */
    @media (prefers-reduced-motion: reduce){
      .sweep, .logo::after, .btn.primary::after{ animation: none !important; }
    }
	
	/* ===== Service Contacts (Footer Above) ===== */

.service-contacts {
  padding: 80px 24px 40px;
}

.service-contacts__glass {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 32px 36px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(30, 60, 90, 0.55),
    rgba(20, 30, 60, 0.45)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(140, 180, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,0.45);
}

.service-contacts h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.service-contacts__intro {
  opacity: 0.85;
  margin-bottom: 28px;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.contact-card {
  padding: 24px 24px 26px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(15, 30, 55, 0.65),
    rgba(10, 20, 45, 0.55)
  );
  border: 1px solid rgba(140, 180, 255, 0.14);
  backdrop-filter: blur(14px);
}

.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.contact-header h3 {
  font-size: 18px;
}

.contact-header a {
  color: #9fd6ff;
  text-decoration: none;
  font-size: 14px;
}

.contact-header a:hover {
  text-decoration: underline;
}

.contact-card p {
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 14px;
}

.contact-card ul {
  padding-left: 18px;
}

.contact-card li {
  margin-bottom: 8px;
  opacity: 0.9;
}


/* =========================================================
   Font Awesome Heading Icons (Logistics)
   ========================================================= */
.hicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.08em;
  color: rgba(110,231,255,.95);
  filter: drop-shadow(0 0 8px rgba(110,231,255,.28));
}
.sectionTitle h2 .hicon{ font-size: 1.05em; }
.card h3 .hicon, .contact-header h3 .hicon{ font-size: 0.92em; }

.sectionTitle h2,
.card h3,
.contact-header h3,
.service-contacts h2{
  display:flex;
  align-items:center;
  gap:0;
}

/* Category tints */
.hicon-why{ color: rgba(167,139,250,.98); filter: drop-shadow(0 0 8px rgba(167,139,250,.26)); }
.hicon-cap{ color: rgba(110,231,255,.98); }
.hicon-ops{ color: rgba(110,231,255,.98); }
.hicon-workflow{ color: rgba(34,211,238,.98); filter: drop-shadow(0 0 8px rgba(34,211,238,.22)); }
.hicon-doc{ color: rgba(110,231,255,.98); }
.hicon-coord{ color: rgba(167,139,250,.92); filter: drop-shadow(0 0 8px rgba(167,139,250,.22)); }
.hicon-form{ color: rgba(110,231,255,.98); }
.hicon-sync{ color: rgba(34,211,238,.98); filter: drop-shadow(0 0 8px rgba(34,211,238,.22)); }
.hicon-supplier{ color: rgba(110,231,255,.98); }
.hicon-alert{ color: rgba(255,255,255,.90); filter: drop-shadow(0 0 10px rgba(255,255,255,.16)); }
.hicon-integrate{ color: rgba(110,231,255,.98); }
.hicon-jit{ color: rgba(255,255,255,.92); filter: drop-shadow(0 0 10px rgba(110,231,255,.14)); }
.hicon-contact, .hicon-person{ color: rgba(110,231,255,.98); }

/* =========================================================
   FIX: Icon alignment + slightly smaller icons
   ========================================================= */

/* Make headings align perfectly */
.sectionTitle h2,
.card h3,
.contact-header h3,
.service-contacts h2,
h2, h3{
  align-items: center;
}

/* Icon: slightly smaller + lift 1px for optical alignment */
.hicon{
  font-size: 0.90em;          /* was 0.95em */
  vertical-align: 0;          /* not needed in flex */
  transform: translateY(-0px);
  margin-right: 10px;
}

/* Section titles a touch larger than cards */
.sectionTitle h2 .hicon{ font-size: 0.88em; }   /* was 1.05em */
.card h3 .hicon,
.contact-header h3 .hicon{ font-size: 0.80em; } /* was 0.92em */

/* Keep icon box tight so it centers better */
.hicon{
  line-height: 1;
  height: 1em;
  width: 1em;
}

/* If any heading isn't flex, this keeps baseline reasonable */
h2 .hicon, h3 .hicon{ display: inline-flex; }