: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,.18) 0%,
          rgba(7,11,20,.55) 55%,
          rgba(7,11,20,.78) 100%
        ),
        url("../pictures/header.webp") center/cover no-repeat;
      filter: saturate(0.8) contrast(1.5);
      z-index:-2;
    }

    /* 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(2, 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; }
    }
		
	/* ===== Primary Contact ===== */
.contact-owner{ padding:60px 0 40px; }
.contact-owner__panel{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding:32px;
}
.contact-owner__intro{ color:var(--muted); margin:0 0 22px; }
.contact-owner__card{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,48,.55);
  padding:22px;
}
.contact-owner__header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
}
.contact-owner__header a{ color:#9fd6ff; font-size:14px; }
.contact-owner__card ul{ padding-left:18px; color:var(--muted); line-height:1.6; }
.contact-owner__card li{ margin-bottom:8px; }


/* Contact owners: 2-column symmetric layout */
.contact-owner__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}


.contact-owner__card {
  height: 100%;
}


@media (max-width: 900px) {
  .contact-owner__grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Font Awesome Heading Icons (Technology)
   ========================================================= */
.hicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  font-size: 0.90em;
  line-height:1;
  transform: translateY(-1px);
  color: rgba(110,231,255,.95);
  filter: drop-shadow(0 0 8px rgba(110,231,255,.28));
}

/* Section titles */
.sectionTitle h2 .hicon{ font-size:0.98em; }

/* Card titles */
.card h3 .hicon,
.contact-owner__header h3 .hicon{ font-size:0.86em; }

/* Ensure flex alignment */
.sectionTitle h2,
.card h3,
.contact-owner__header h3,
.contact-owner h2{
  display:flex;
  align-items:center;
}

/* Category hints */
.hicon-tech{ color: rgba(110,231,255,.98); }
.hicon-exp{ color: rgba(167,139,250,.98); }
.hicon-arch{ color: rgba(110,231,255,.98); }
.hicon-api{ color: rgba(167,139,250,.95); }
.hicon-flow{ color: rgba(34,211,238,.98); }
.hicon-ind, .hicon-plc{ color: rgba(110,231,255,.98); }
.hicon-contact, .hicon-person{ color: rgba(110,231,255,.98); }