:root{
    /* 新的主色調 - 基於圖片風格 */
    --bg:#f8f9fa;
    --bg-card:#ffffff;
    --fg:#2c3e50;
    --muted:#6c757d;
    --accent:#20c997;
    --accent-hover:#1ba87e;
    --line:#e9ecef;
    --success:#28a745;
    
    /* 翻譯服務 (淺灰藍色主題) */
    --primary-blue: #2c3e50;
    --secondary-blue: #3498db;
    --accent-blue: #20c997;
    --light-bg: #f0f4f8;
    --card-bg: #ffffff;
    
    /* LINE Bot服務 (深綠色主題) */
    --dark-green-bg: #1e4620;
    --medium-green-bg: #2d5a2f;
    --primary-green: #388e3c;
    --accent-green: #20c997;
    --hover-green: #1ba87e;
    --light-green-text: #e8f5e9;
    --medium-green-text: #c8e6c9;
    --dark-green-text: #1b5e20;
    
    --light: #f8f9fa;
    --text: #2c3e50;
    --text-light: #6c757d;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --transition: all 0.3s ease;
  }
  
  *{box-sizing:border-box; margin:0; padding:0;}
  
  body{
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans TC", sans-serif;
    background:var(--bg);
    color:var(--fg);
    line-height:1.6;
    overflow-x:hidden;
  }
  
  /* Header Navigation */
 /* 修改後的 Header 邏輯 */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999; /* 確保在最前方 */
pointer-events: none; /* 重要：讓 Header 透明區域不攔截點擊 */
background: transparent; /* 確保背景不會擋住 */
}

.navbar-container {
max-width: 1200px;
margin: 15px auto; 
background: #ffffff;
border-radius: 100px;
padding: 8px 12px 8px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
border: 1px solid #f0f0f0;
pointer-events: auto; /* 重要：恢復導覽列（膠囊）本身的點擊功能 */
position: relative;
}
/* Logo 圖片控制 */
.logo-img {
height: 45px; /* 根據圖片比例調整高度 */
width: auto;
display: block;
}

/* 按鈕群組 */
.nav-links {
display: flex;
gap: 10px;
list-style: none;
align-items: center;
margin: 0;
padding: 0;
}

.aabtn {
display: flex;
align-items: center;
padding: 10px 18px;
border-radius: 50px;
text-decoration: none;
font-size: 14px;
font-weight: 800;
transition: opacity 0.2s;
white-space: nowrap;

color: #9fd3f7;
}

.aabtn:hover {
opacity: 0.8;
}

/* 圓形箭頭圖示模擬 */
.aaarrow-icon {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-left: 10px;
position: relative;
}

/* 箭頭的小勾勾 (用 CSS 畫) */
.aaarrow-icon::after {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
top: 50%;
left: 45%;
transform: translate(-50%, -50%) rotate(45deg);
}

/* 1. 白底藍框按鈕 */
.aabtn-outline {
border: 2px solid var(--blue-text);
color: var(--blue-text);
}
.circle-blue {
background-color: var(--blue-text);
color: #fff; /* 箭頭顏色 */
}

/* 2. 紅橘漸層按鈕 */
.aabtn-gradient {
background: var(--red-grad);
color: #9fd3f7;
}
.circle-white {
background-color: #fff;
}
.aabtn-gradient .circle-white { color: #e81b3d; } /* 箭頭變紅色 */

/* 3. LINE 綠色按鈕 */
.aabtn-line {
background: var(--line-green);
color: #542929;
}
.aabtn-line .aacircle-white { color: var(--line-green); } /* 箭頭變綠色 */

/* 手機版適應 */
@media (max-width: 992px) {
.navbar-container {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 50px;
}
.logo-img {
  height: 35px;
}
.nav-links {
  display: none; /* 這裡可配合您原本的 JS toggleMenu 切換 active */
}
.nav-links.active {
  display: flex;
  position: absolute;
  top: 70px;
  right: 0;
  flex-direction: column;
  background: white;
  width: 200px;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
}
  /* Mobile Menu */
  .mobile-menu-btn {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
    z-index: 1001;
  }
  
  .mobile-menu-btn span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--fg);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }
  
  .mobile-menu-btn span:nth-child(1) { top: 0px; }
  .mobile-menu-btn span:nth-child(2) { top: 10px; }
  .mobile-menu-btn span:nth-child(3) { top: 20px; }
  
  .mobile-menu-btn.active span:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
  }
  
  /* Sections */
  section{
    max-width:1200px;
    margin:auto;
    padding:100px 24px;
  }
  
    .heroee {
  position: relative;
  z-index: 10; /* 給予適當層級 */
}

  .ctaee {
    position: relative;
    z-index: 20; /* 確保按鈕在 Hero 內部的最高層 */
  }

  .btnee{
    cursor: pointer !important; /* 強制滑鼠圖標變手型 */
  }
  /* Hero Section */
  .hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:64px;
    align-items:center;
    padding-top:180px;
    padding-bottom:140px;
    position:relative;

        /* ★ 加入這行，切掉跑出去的背景圓圈 ★ */
  overflow: hidden; 
  width: 100%; /* 確保不超過視窗 */
    }
  
  .hero::before{
    content:'';
    position:absolute;
    top:-200px;
    right:-200px;
    width:600px;
    height:600px;
    background:radial-gradient(circle, rgba(32,201,151,0.1) 0%, transparent 70%);
    pointer-events:none;
  }
  
  h1{
    font-size:clamp(40px,6vw,68px);
    font-weight:700;
    letter-spacing:-0.02em;
    margin:0 0 20px;
    line-height:1.1;
    color:var(--primary-blue);
  }
  
  .hero-subtitle{
    font-size:20px;
    color:var(--muted);
    margin:0 0 12px;
  }
  
      .hero-img{
        background-image: url("{% static 'img/a1.png' %}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        border-radius:20px;
        width:100%;
        height:480px;
        position:relative;
        overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,0.15);
      }
          

      .hero-img::before{
        content:'';
        position:absolute;
        inset:0;
        background: linear-gradient(
          135deg,
          rgba(0,0,0,0.25),
          rgba(0,0,0,0.1)
        );
      }

          .hero-img::after{
            content:'';
            position:absolute;
            inset:0;
            background:
              repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
              repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
          }
          
          /* Headline with image */
          .headline-with-image {
            position: relative;
            display: inline-block;
          }
          
          .headline-image {
            position: absolute;
            top: -65px;
            right: -112px;
            width: 175px;
            height: auto;
            z-index: 1;
          }
          
          /* CTA Buttons */
          .cta{
            margin-top:40px;
            display:flex;
            gap:16px;
            flex-wrap:wrap;
          }
          
          .btn, .cta-button{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:14px 28px;
            border-radius:12px;
            text-decoration:none;
            font-size:16px;
            font-weight:500;
            transition:all 0.2s;
            border:none;
            cursor:pointer;
            text-align:center;
            min-width:180px;
            justify-content:center;
          }
          
          .btn-primary, .primary-cta{
            background:var(--accent);
            color:#fff;
          }
          
          .btn-primary:hover, .primary-cta:hover{
            background:var(--accent-hover);
            transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(32,201,151,0.3);
          }
          
          .btn-secondary, .secondary-cta{
            background:transparent;
            color:var(--accent);
            border:1px solid var(--accent);
          }
          
          .btn-secondary:hover, .secondary-cta:hover{
            background:var(--accent);
            color:#fff;
          }
          
          /* Theme Variations */
          .translation-theme {
            background-color: var(--light-bg);
          }
          
          .translation-theme h1, 
          .translation-theme h2, 
          .translation-theme h3 {
            color: var(--primary-blue);
          }
          
          .translation-theme p {
            color: var(--text-light);
          }
          
          .translation-theme .primary-cta {
            background-color: var(--accent);
            color: white;
          }
          
          .translation-theme .primary-cta:hover {
            background-color: var(--accent-hover);
          }
          
          .linebot-theme {
            background-color: var(--dark-green-bg);
          }
          
          .linebot-theme h1, 
          .linebot-theme h2, 
          .linebot-theme h3 {
            color: var(--light-green-text);
          }
          
          .linebot-theme p {
            color: var(--medium-green-text);
          }
          
          .linebot-theme .primary-cta {
            background-color: var(--accent-green);
            color: white;
          }
          
          .linebot-theme .primary-cta:hover {
            background-color: var(--hover-green);
          }
          
          /* Service Cards */
          .cards{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
            gap:32px;
            margin-top:48px;
          }
          
          .card{
            background:var(--bg-card);
            padding:32px;
            border-radius:16px;
            border:1px solid var(--line);
            transition:var(--transition);
          }
          
          .card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
          }
          
          .card-icon{
            font-size:40px;
            margin-bottom:16px;
          }
          
          .card h3{
            font-size:20px;
            margin:0 0 12px;
            color:var(--fg);
          }
          
          .card p{
            color:var(--muted);
            font-size:15px;
            margin:8px 0;
          }
          
          /* Section Headers */
          .section-header, .section-title{
            text-align:center;
            margin-bottom:64px;
          }
          
          .section-label{
            display:inline-block;
            padding:6px 12px;
            background:rgba(32,201,151,0.1);
            color:var(--accent);
            border-radius:20px;
            font-size:13px;
            font-weight:600;
            letter-spacing:0.5px;
            margin-bottom:16px;
          }
          
          h2{
            font-size:clamp(32px,4vw,48px);
            margin:0 0 16px;
            color:var(--fg);
                max-width: 800px;
  margin: 16px auto 0;
  line-height: 1.7;
  text-align: left;
          }
          
          .section-desc{
            font-size:18px;
            color:var(--muted);
            max-width:600px;
            margin:0 auto;
          }
          
          /* Stats Grid */
          .stats{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
            gap:32px;
            text-align:center;
            padding:64px 0;
          }
          
          .stat h3{
            font-size:48px;
            color:var(--accent);
            margin:0 0 8px;
          }
          
          .stat p{
            color:var(--muted);
            font-size:16px;
          }
          
          /* Features Grid */
          .features-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
            gap:32px;
            margin-top:48px;
          }
          
          .feature{
            display:flex;
            gap:16px;
          }
          
          .feature-icon{
            width:48px;
            height:48px;
            border-radius:12px;
            background:rgba(32,201,151,0.1);
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:24px;
            flex-shrink:0;
          }
          
          .feature h4{
            font-size:18px;
            margin:0 0 8px;
            color:var(--fg);
          }
          
          .feature p{
            color:var(--muted);
            font-size:14px;
          }
          
          /* Case Studies */
          .case-studies{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
            gap:32px;
            margin-top:48px;
          }
          
          .case-card{
            background:var(--bg-card);
            border-radius:16px;
            overflow:hidden;
            border:1px solid var(--line);
            transition:var(--transition);
          }
          
          .case-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
          }
          
          .case-image{
            width:100%;
            height:200px;
            background:linear-gradient(135deg, var(--accent), var(--accent-hover));
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:48px;
          }
          
          .case-content{
            padding:24px;
          }
          
          .case-content h4{
            font-size:20px;
            margin:0 0 12px;
            color:var(--fg);
          }
          
          .case-content p{
            color:var(--muted);
            font-size:14px;
            margin:8px 0;
          }
          
          /* Pricing */
          .pricing{
            background:var(--bg);
          }
          
          .pricing-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
            gap:32px;
            margin-top:48px;
          }
          
          .pricing-card{
            background:var(--bg-card);
            border-radius:16px;
            border:1px solid var(--line);
            overflow:hidden;
            transition:var(--transition);
          }
          
          .pricing-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
          }
          
          .pricing-card.popular{
            border:2px solid var(--accent);
            position:relative;
          }
          
          .popular-tag{
            position:absolute;
            top:20px;
            right:20px;
            background:var(--accent);
            color:#fff;
            padding:6px 16px;
            border-radius:20px;
            font-size:13px;
            font-weight:600;
          }
          
          .pricing-header{
            padding:32px;
            text-align:center;
            background:var(--light-bg);
          }
          
          .pricing-header h4{
            font-size:24px;
            margin:0 0 16px;
            color:var(--fg);
          }
          
          .price{
            font-size:48px;
            font-weight:700;
            color:var(--accent);
            margin:16px 0;
          }
          
          .price .currency{
            font-size:24px;
          }
          
          .price .unit{
            font-size:18px;
            color:var(--muted);
          }
          
          .price-custom{
            font-size:28px;
            color:var(--accent);
          }
          
          .price-subtitle{
            color:var(--muted);
            font-size:14px;
          }
          
          .pricing-body{
            padding:32px;
          }
          
          .pricing-features{
            list-style:none;
            margin:0 0 24px;
            text-align: center;
          }
          
          .pricing-features li{
            padding:12px 0;
            border-bottom:1px solid var(--line);
            color:var(--text-light);
            font-size:19px;
          }
          
          .pricing-features li:last-child{
            border-bottom:none;
          }
          
          .pricing-features li::before{
            content:'✓';
            color:var(--accent);
            margin-right:12px;
            font-weight:700;
          }
          
          .pricing-button{
            display:block;
            width:100%;
            padding:14px 28px;
            background:var(--accent);
            color:#fff;
            text-align:center;
            border-radius:12px;
            text-decoration:none;
            font-weight:500;
            transition:var(--transition);
          }
          
          .pricing-button:hover{
            background:var(--accent-hover);
            transform:translateY(-2px);
          }
          
          .pricing-button.highlight{
            background:var(--accent);
          }
          
          /* Workflow */
          .workflow{
            padding:80px 24px;
          }
          
          .workflow-steps{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
            gap:24px;
            margin-top:48px;
          }
          
          .workflow-step{
            text-align:center;
            padding:32px 24px;
            background:var(--bg-card);
            border-radius:16px;
            border:1px solid var(--line);
          }
          
          .step-number{
            width:60px;
            height:60px;
            border-radius:50%;
            background:var(--accent);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:24px;
            font-weight:700;
            margin:0 auto 16px;
          }
          
          .workflow-step h4{
            font-size:18px;
            margin:0 0 12px;
            color:var(--fg);
          }
          
          .workflow-step p{
            color:var(--muted);
            font-size:14px;
          }
          
          .payment-stage{
            margin-top:12px;
            padding:8px 16px;
            background:rgba(32,201,151,0.1);
            color:var(--accent);
            border-radius:8px;
            font-size:13px;
            font-weight:600;
          }
          
          .payment-info{
            margin-top:48px;
            padding:32px;
            background:var(--bg-card);
            border-radius:16px;
            border:1px solid var(--line);
          }
          
          .payment-info h4{
            font-size:20px;
            margin:0 0 16px;
            color:var(--fg);
          }
          
          .payment-info ul{
            list-style:none;
            margin:0;
            padding:0;
          }
          
          .payment-info li{
            padding:12px 0;
            color:var(--text-light);
            font-size:15px;
          }
          
          .payment-info li strong{
            color:var(--accent);
          }
          
          /* Contact */
          .contact{
            text-align:center;
            padding:80px 24px;
            background:var(--light-bg);
            border-radius:24px;
          }
          
          .contact h2{
            margin-bottom:16px;
          }
          
          .contact p{
            font-size:18px;
            color:var(--muted);
            margin-bottom:32px;
          }
          
          .contact-methods{
            display:flex;
            gap:16px;
            justify-content:center;
            flex-wrap:wrap;
          }
          
          /* Divider */
          .divider{
            height:1px;
            background:var(--line);
            max-width:1200px;
            margin:80px auto;
          }
          
          /* Footer */
          footer{
            background:var(--primary-blue);
            color:#fff;
            padding:32px 24px;
            text-align:center;
          }
          
          .footer-content p{
            margin:0;
            color:rgba(255,255,255,0.8);
          }
          
          /* Responsive */
          @media (max-width: 768px) {
            .mobile-menu-btn {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }
            
            .hero {
              grid-template-columns: 1fr;
              padding-top: 120px;
              padding-bottom: 80px;
            }
            
            .hero-img {
              height: 300px;
            }
            
            .cards,
            .features-grid,
            .pricing-grid,
            .workflow-steps {
              grid-template-columns: 1fr;
            }
            
            section {
              padding: 60px 16px;
            }
            
            h1 {
              font-size: 36px;
            }
            
            h2 {
              font-size: 28px;
            }
                /* ★ 強制這些區塊在手機上乖乖縮放，不要卡死寬度 ★ */
          .cards,
            .features-grid,
            .pricing-grid,
            .workflow-steps,
            .case-studies,
            .card-grid,   /* 補上這個 */
            div[style*="grid-template-columns"] /* 補上行內樣式的 grid */
            {
              grid-template-columns: 1fr !important;
            }

            /* 讓卡片可以縮到比 300px 更小 */
            .business-card, 
            .pricing-card,
            .business-linecard {
              min-width: auto !important;
              width: 100% !important;
            }
            .headline-image {
                right: 0 !important;
                max-width: 80px; /* 手機版圖示縮小 */
                top: -40px;
              }
          }