/* ====== Palette (Blue & White) ====== */
:root{
  /* Core */
  --bg: #071A2C;                       /* 深海軍藍背景 */
  --surface: rgba(255,255,255,0.08);   /* 次級卡片底 */
  --card: rgba(255,255,255,0.10);      /* 主卡片底 */
  --glass: rgba(255,255,255,0.20);     /* 玻璃霧面 */
  --outline: rgba(255,255,255,0.22);   /* 卡片邊框 */
  --text: #F5F9FF;                     /* 主文字（近白） */
  --muted: #C7D7EE;                    /* 次文字 */
  --primary: #2F7BFF;                  /* 主藍（互動/按鈕） */
  --primary-600:#2267E6;               /* 深藍（hover） */
  --accent: #8EC5FF;                   /* 點綴淺藍 */
  --focus: #93C5FD;                    /* 聚焦外框 */
  --shadow: 0 12px 32px rgba(0,0,0,.28);
  --radius: 20px;
}

.brand-logo {
  height: 60px;
  width: auto;
  border-radius: 6px;
}

/* ====== Global ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Segoe UI","Noto Sans TC",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(47,123,255,.22), transparent 60%),
    var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto; border-radius:12px}
h1,h2,h3,h4{margin:0 0 .6rem 0; line-height:1.25}
h1{font-size:clamp(2rem, 4vw, 3.2rem)}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}
h3{font-size:1.25rem}
a{color:var(--accent); text-decoration:none}
a:hover{color:#B9DCFF}
.container{width:min(1120px, 92%); margin-inline:auto}

/* 背景圖覆蓋（藍色濾鏡 + 降噪） */
.site-bg{
  position:fixed; inset:0;
  background:
    linear-gradient(0deg, rgba(7,26,44,.75), rgba(7,26,44,.75)),
    url('assets/bg-tech.png') center/cover no-repeat;
  z-index:-1;
  filter:saturate(1.05) contrast(1.08);
}

/* ====== Header / Nav ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#ffffff;                 /* 白色背景 */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:#01142b; }
.brand-text{letter-spacing:.02em}

.nav{display:flex; align-items:center; gap:1rem}
.nav a{
  color:#021431;
  padding:.4rem .7rem; border-radius:10px;
}
.nav a:hover{background:rgba(255,255,255,.10)}

.dropdown{position:relative}
.dropbtn{
  background:transparent; color:#01142b; border:none;
  padding:.4rem .7rem; border-radius:10px; cursor:pointer
}
.dropbtn:hover{background:rgba(255,255,255,.10)}
.dropdown-content{
  position:absolute; top:120%; left:0; min-width:220px; display:none; flex-direction:column;
  background:rgba(7,26,44,.96); border:1px solid rgba(255,255,255,.10);
  border-radius:12px; box-shadow:var(--shadow);
}
.dropdown:hover .dropdown-content{display:flex}
.dropdown-content a{padding:.6rem .8rem; color:#E8F1FF}
/* .dropdown-content a:hover{background:rgba(255,255,255,.08)}  */

/* 漢堡按鈕 */
.nav-toggle{display:none; background:none; border:none; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.3s}

/* ====== Hero ====== */
.hero{padding:4rem 0 2rem}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.badge{
  display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.9rem;
  color:#0B1220; background:#E8F2FF; border:1px solid rgba(47,123,255,.25);
  margin-bottom:.8rem
}
.hero-copy .accent{color:#B9DCFF}
.lead{color:var(--muted); max-width:56ch}
.hero-cta{display:flex; gap:.75rem; margin-top:1rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.15rem; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  cursor:pointer; transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  color:white; border:none; box-shadow: 0 8px 22px rgba(47,123,255,.35);
}
.btn.primary:hover{filter:saturate(1.05); transform:translateY(-1px)}
.btn.ghost{
  background:transparent; color:#F0F6FF; border:1px solid rgba(255,255,255,.28)
}
.btn.ghost:hover{background:rgba(255,255,255,.10)}

.card{
  background:var(--card); backdrop-filter: blur(10px);
  border:1px solid var(--outline); border-radius:var(--radius)
}
.card.shadow{box-shadow:var(--shadow)}
.hero-showcase{display:grid; grid-template-columns:1fr .8fr; gap:1rem}
.thumbs{display:grid; gap:1rem}
.card.small img{aspect-ratio: 16/10; object-fit:cover}
.hero-showcase figure img {
    /* 讓圖片寬度和高度填滿容器 */
    width: 100%;
    height: 100%;
    
    /* 關鍵屬性：按比例縮放圖片，直到完全覆蓋容器 */
     object-fit: contain;
    
    /* 讓圖片變成區塊級元素，消除底部空白 */
    display: block;
}

/* ====== Sections ====== */
.section{padding:4rem 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0))}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem}
.stack{display:grid; gap:1rem}

.panel.glass{
  background:var(--glass); border:1px solid var(--outline);
  padding:1.25rem; border-radius:var(--radius)
}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chips span{
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16);
  color:#F2F7FF
}

.checklist{margin:0; padding-left:1.2rem}
.checklist li{margin:.25rem 0}
.muted{color:var(--muted)}

/* Service Cards */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:1.2rem}
.service-card{
  background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius);
  padding:1.2rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease
}
.service-card:hover{
  transform: translateY(-4px); box-shadow: var(--shadow); background:rgba(255,255,255,.12)
}

/* Features */
.feature{
  background:var(--surface); border:1px solid var(--outline);
  padding:1rem; border-radius:var(--radius)
}

/* qr code */
.qr-figure {
  background: #ffffff;             /* 白底 */
  border-radius: 12px;             /* 圓角 */
  padding: 16px 16px 12px;         /* 內距 */
  align-items: center;             /* 水平置中 */
  justify-content: center;         /* 垂直置中（如果父容器有高度） */
  text-align: center;              /* 文字置中 */
}

.qr-figure img {
  width: 240px;                    /* 圖片寬度 */
  height: auto;                    /* 維持比例 */
  display: block;                  /* 消除下方空白間距 */
  margin: 10px auto 0;             /* 上方留距離給文字 */
}

.qr-caption {
  color: #0078D4;                 
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

/* Contact */
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.contact-form{
  display:grid; gap:.8rem; background:var(--surface); padding:1rem;
  border-radius:var(--radius); border:1px solid var(--outline)
}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:.7rem .8rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.26); background:rgba(8,18,34,.65); color:#fff;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--focus); box-shadow:0 0 0 4px rgba(147,197,253,.18)
}
.form-note{color:var(--muted); font-size:.9rem}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.2rem 0; background:rgba(7,26,44,.72); backdrop-filter: blur(10px)
}
.site-footer .foot{display:flex; align-items:center; justify-content:space-between}
.to-top{
  color:#fff; padding:.4rem .6rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.26)
}
.to-top:hover{background:rgba(255,255,255,.12)}

/* ====== RWD ====== */
/* =================================
  Mobile Styles (適用於手機板)
================================= */
@media (max-width: 720px) {

  /* 漢堡按鈕 */
  .nav-toggle {
    display: block;
    position: fixed;
    right: 1rem;
    top: 1rem;
    width: 42px;
    height: 42px;
    background: #fff;
    border: 1px solid #E5ECF5;
    border-radius: 10px;
    padding: 10px 8px;
    z-index: 1001;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #071A2C;
    margin: 5px 0;
    transition: .25s;
  }

  .nav.open + .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav.open + .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .nav.open + .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 手機版導覽列本體 */
  .nav {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(7,26,44, 0.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5rem 1.5rem 2rem;
    gap: 1.2rem;
    z-index: 1000;
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    color: #fff;
    font-size: 1.2rem;
    width: 100%;
    padding: 0.6rem 0;
  }

  /* Dropdown 調整為靜態展開 */
  .dropdown {
    width: 100%;
  }

  .dropdown .dropbtn {
    width: 100%;
    font-size: 1.2rem;
    text-align: left;
    background: transparent;
    color: #fff;
    border: none;
    padding: 0.6rem 0;
    cursor: pointer;
  }

  .dropdown-content {
    display: flex;
    flex-direction: column;
    position: static;
    background: transparent;
    border: none;
    padding-left: 1rem;
    margin-top: 0.3rem;
  }

  .dropdown-content a {
    color: #C7D7EE;
    font-size: 1.1rem;
    padding: 0.4rem 0;
  }

  .dropdown:hover .dropdown-content {
    display: flex;
  }

  /* 避免滑動時底層滾動 */
  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-showcase{order:-1}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr; gap:1rem}
  .cards{grid-template-columns:1fr 1fr}
}