/* 1. 初始狀態：透明背景、文字白色 (配合首圖) */
.navbar-glass {
    background: transparent !important;
    padding: 20px 0; /* 在最頂部時稍微加高，顯得大氣 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑的滑動與變色過渡 */
    box-shadow: none;
}
.navbar-glass .brand-logo,
.navbar-glass .nav-link {
    color: #ffffff !important;
}

/* 2. 捲動後的狀態：白底、深色字、帶陰影 */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 10px 0; /* 捲動後變窄，節省畫面空間 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.navbar-scrolled .brand-logo {
    color: #1e293b !important;
}
.navbar-scrolled .nav-link {
    color: #475569 !important;
}
.navbar-scrolled .nav-link:hover {
    color: #0ea5e9 !important;
}

/* Logo 現代感排版 */
.brand-logo {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}
.brand-logo span {
    color: #0ea5e9; 
}

/* 3. 導覽連結與 Aurotek 風格的底線動畫 (從左至右) */
.nav-link {
    font-weight: 500;
    margin: 0 15px;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px; /* 貼齊文字底部 */
    left: 0;
    background-color: #0ea5e9;
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}

/* 獨立突出的 CTA 按鈕保持不變 */
.btn-nav-cta {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: white !important;
    border-radius: 50px;
    padding: 10px 36px !important;/* 稍微增加上下高度，並大幅拉開左右的留白 */
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.btn-nav-cta::after {
    display: none; /* 按鈕不需要底線動畫 */
}
.btn-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
    color: white !important;
}

/* --- 首屏輪播圖 (Hero Carousel) 設定 --- */
.hero-carousel-section {
    height: 85vh; /* 螢幕高度的 85%，可依喜好調整為 100vh 滿版 */
    position: relative;
    overflow: hidden; /* 防止放大動畫溢出邊界 */
}

/* 確保內部容器都繼承高度 */
#heroCarousel, .carousel-inner, .carousel-item {
    height: 100%;
}

/* 背景圖設定與緩慢放大動畫 */
.carousel-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoomEffect 20s infinite alternate linear; /* 緩慢放大效果 */
}

/* 黑色半透明遮罩：確保白色文字在任何背景圖上都清晰可見 */
.carousel-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.55); /* 數字越大越暗 */
    z-index: 1;
}

/* 將文字層拉到遮罩上方，並置中對齊 */
.carousel-caption {
    z-index: 2;
    bottom: auto; /* 覆寫 Bootstrap 預設的 bottom 設定 */
    top: 0;
    padding-top: 80px; /* 避開頂部的透明導覽列 */
}

/* 緩慢放大的動畫關鍵影格 */
@keyframes zoomEffect {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* =========================================
   字體放大與排版優化設定
========================================= */

/* 1. 提升整體基礎字體與行距 (從預設的 16px 提升到 18px) */
/* Bootstrap 許多元素使用 rem 單位，改了 html/body 的大小，整體都會等比例跟著變大 */
html, body {
    font-size: 18px; 
    line-height: 1.6;
}

/* 2. 放大導覽列文字 */
.brand-logo {
    font-size: 1.8rem; /* 原本是 1.5rem */
}
.nav-link {
    font-size: 1.15rem; /* 讓選單字體更清晰 */
}
.btn-nav-cta {
    font-size: 1.1rem;
}

/* 3. 放大首屏輪播圖的副標題 */
.carousel-caption .lead {
    font-size: 1.5rem; /* 讓「專為狹窄通道設計...」這段說明更醒目 */
    font-weight: 500;
}

/* 4. 放大產品卡片內的內文與列表 */
.card-body p, 
.product-card ul {
    font-size: 1.15rem;
}

/* 5. 優化表單輸入框 (讓手機點擊更好按，字體也更大) */
.form-control, 
.form-select {
    font-size: 1.1rem;
    padding: 0.75rem 1rem; /* 增加輸入框的高度與內距 */
}

/* =========================================
   修復：強制 CTA 按鈕文字永遠保持白色
========================================= */
.navbar-scrolled .nav-link.btn-nav-cta,
.navbar-scrolled .nav-link.btn-nav-cta:hover,
.nav-link.btn-nav-cta:hover {
    color: #ffffff !important;
}

/* =========================================
   首屏輪播圖專屬：巨大化 CTA 按鈕
========================================= */
.btn-hero-cta {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: #ffffff !important;
    border-radius: 50px;
    padding: 15px 45px; /* 加大上下左右的內距，讓按鈕變厚實 */
    font-size: 1.35rem; /* 字體明顯放大 */
    font-weight: 700;
    letter-spacing: 2px; /* 字距微調，增加呼吸感 */
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); /* 更強烈的發光陰影 */
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.1); /* 加一點微反光邊框增加質感 */
}

.btn-hero-cta:hover {
    transform: translateY(-3px) scale(1.03); /* 滑過時微微往上浮起並放大 */
    box-shadow: 0 12px 35px rgba(14, 165, 233, 0.6); /* 陰影加深，產生立體互動感 */
    color: #ffffff !important;
}