/* BEEPHONE 網站主要樣式表 */
/* 
 * 注意：@tailwind 指令是 Tailwind CSS 的編譯指令，不是標準 CSS。
 * 這些警告是正常的，Tailwind 編譯器會處理這些指令。
 * 如需抑制警告，請在 VS Code 設定中將 "css.lint.unknownAtRules" 設為 "ignore"
 */

/* 自訂樣式（Tailwind CSS 會編譯到這裡） */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自訂 CSS 變數 */
:root {
    --primary-color: #F8b62d;
    --primary-hover: #e0a429;
}

/* 自訂工具類 */
@layer utilities {
    .text-primary {
        color: var(--primary-color);
    }
    
    .bg-primary {
        background-color: var(--primary-color);
    }
    
    .bg-primary-hover:hover {
        background-color: var(--primary-hover);
    }
}

/* 平滑滾動 */
html {
    scroll-behavior: smooth;
}

/* 確保導覽列下方內容不被遮擋 */
body {
    padding-top: 4rem; /* 64px = h-16 */
}

/* 確保粒子背景能撐滿整個區塊 */
#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* 確保在內容下方 */
}

/* 確保 Swiper 和內容在粒子上方 */
.testimonial-section > .max-w-7xl {
  z-index: 10;
  position: relative; /* 建立新的堆疊上下文 */
}

/* Swiper Cube 樣式設定 */
/* 確保 Swiper 容器有足夠空間顯示背景裝飾 */
.testimonial-section .swiper {
  width: 320px;
  height: 420px;
  padding: 40px; /* 大幅增加 padding 擴大可拖動區域 */
  margin: -40px; /* 負 margin 抵消 padding 對視覺的影響 */
  cursor: grab;
  position: relative;
  z-index: 10;
}

.testimonial-section .swiper:active {
  cursor: grabbing;
}

/* 確保整個 swiper-wrapper 都可以拖動 */
.testimonial-section .swiper-wrapper {
  cursor: grab;
}

.testimonial-section .swiper-wrapper:active {
  cursor: grabbing;
}

@media (min-width: 768px) {
  .testimonial-section .swiper {
    width: 380px;
    height: 480px;
    padding: 50px;
    margin: -50px;
  }
}

.testimonial-section .swiper-slide {
  background-position: center;
  background-size: cover;
  background-color: #fff;
  /* 關鍵！讓每一面卡片都有圓角 */
  border-radius: 20px; 
  overflow: hidden; /* 確保內容在圓角內 */
}

.testimonial-section .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 圖片也要確保圓角 */
  border-radius: 20px;
}

.testimonial-section .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 調整 Overlay 漸層，讓它在圖片上更自然 */
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  color: white;
}

.testimonial-section .overlay h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #F8b62d;
  margin-bottom: 4px;
}

.testimonial-section .overlay .role {
  font-size: 0.9rem;
  font-weight: bold;
  color: rgba(255,255,255,0.8);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.testimonial-section .overlay .desc {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.95);
}

.testimonial-section .ratings {
  color: #F8b62d;
  font-size: 1.2rem;
  display: flex;
  gap: 4px;
}

/* 服務卡片精緻微光霓虹效果 */
.service-card {
    position: relative;
    overflow: hidden; /* 確保光暈不會溢出太多 */
    border: 1px solid rgba(0,0,0,0.05); /* 輕微的預設邊框 */
    transition: all 0.3s ease-in-out;
}

/* 內部柔和漸層光 */
.service-card::after {
    content: '';
    position: absolute;
    inset: 15%; /* 讓光暈更集中在中心 */
    background: radial-gradient(circle at center, rgba(248, 182, 45, 0.2) 0%, transparent 70%); /* 降低亮度 */
    border-radius: 50%; /* 圓形光暈 */
    opacity: 0;
    filter: blur(25px); /* 輕微模糊 */
    transition: opacity 0.4s ease-in-out;
    z-index: 1; /* 確保在偽元素之前 */
}

.service-card:hover::after {
    opacity: 1;
}

/* 邊框流動霓虹光 */
.service-card::before {
    content: '';
    position: absolute;
    inset: -2px; /* 覆蓋卡片邊緣 */
    border-radius: 30px; /* 匹配卡片圓角 */
    background: conic-gradient(from var(--angle), transparent 0%, transparent 60%, rgba(248, 182, 45, 0.8) 100%);
    filter: blur(10px); /* 讓邊框光暈更細緻 */
    opacity: 0;
    animation: rotateBorder 3s linear infinite paused; /* 預設暫停 */
    transition: opacity 0.3s ease-in-out;
    z-index: 0; /* 在卡片主體之下 */
}

.service-card:hover::before {
    opacity: 1;
    animation-play-state: running; /* 懸停時啟動動畫 */
}

/* 動畫定義 */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBorder {
  to { --angle: 360deg; }
}

/* 確保卡片內容在所有光暈之上 */
.service-card .relative.z-10 {
    position: relative;
    z-index: 2; /* 確保內容位於最上層 */
    background: rgba(255,255,255,0.7); /* 輕微的半透明底，讓內容更清晰 */
    border-radius: 24px; /* 稍微小一點的圓角，避免與卡片邊緣重疊 */
    backdrop-filter: blur(4px); /* 輕微的毛玻璃效果 */
}

/* SVG ICON 動畫基礎樣式 */
.animated-icon {
    transition: color 0.3s ease-in-out;
}

.animated-icon path,
.animated-icon rect,
.animated-icon line,
.animated-icon polyline {
    stroke-dasharray: 1000; /* 設置一個足夠大的值 */
    stroke-dashoffset: 1000; /* 預設完全隱藏 */
    transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease-in-out; /* 動畫時間 */
}

/* HOVER 時的動畫效果 */
.group:hover .animated-icon path,
.group:hover .animated-icon rect,
.group:hover .animated-icon line,
.group:hover .animated-icon polyline {
    stroke-dashoffset: 0; /* 繪製完成 */
    stroke: #F8B62D; /* 繪製時變金色 */
}

/* 為不同的 SVG 元素設置不同的 pathLength，以達到自然的繪製順序 */
/* 租新機 (手機圖示) */
.service-card:nth-child(1) .animated-icon rect { 
    stroke-dasharray: 68; 
    stroke-dashoffset: 68; 
} /* 估算的手機外框路徑長度 */

.service-card:nth-child(1) .animated-icon line { 
    stroke-dasharray: 4; 
    stroke-dashoffset: 4; 
    transition-delay: 0.3s; 
} /* 手機底部線條，延遲出現 */

/* 舊換租 (交換箭頭圖示) */
.service-card:nth-child(2) .animated-icon line:nth-of-type(1) { 
    stroke-dasharray: 22; 
    stroke-dashoffset: 22; 
} /* 中間橫線 */

.service-card:nth-child(2) .animated-icon polyline:nth-of-type(1) { 
    stroke-dasharray: 28; 
    stroke-dashoffset: 28; 
    transition-delay: 0.1s; 
} /* 右箭頭 */

.service-card:nth-child(2) .animated-icon polyline:nth-of-type(2) { 
    stroke-dasharray: 28; 
    stroke-dashoffset: 28; 
    transition-delay: 0.2s; 
} /* 左箭頭 */

/* --- High-End Fashion Hero Slider --- */
.hero-slider-section {
  position: relative;
  width: 100%;
  height: 750px; /* 稍微加高，給多手機展示空間 */
  background: #ffffff; /* 純白背景，極簡時尚 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --main-text: #1d1d1f; /* Apple 風格深灰 */
}

.swiper {
  width: 100%;
  height: 100%;
  padding: 40px 0;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   BEEPHONE 亮色磨砂玻璃風格套用
   目標類別: .bee-card 及其子元素
   ========================================= */

/* 1. 核心卡片容器樣式重置 */
.bee-card {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 40px;
  padding: 0 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 背景改為高透光白色 */
  background: rgba(255, 255, 255, 0.65) !important;
  /* 核心磨砂效果 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  /* 白色細邊框，增加精緻感 */
  border: 1px solid rgba(255, 255, 255, 0.8);
  /* 柔和的長投影，製造懸浮感 */
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.05), 
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  /* 確保使用較新的平滑過渡設定 */
  transition: all 0.3s ease;
  /* 關鍵：文字顏色反轉 */
  color: #1d1d1f !important;
}

/* --- 主題色定義 (保留變數，但背景統一為亮色磨砂玻璃) --- */
.slide-gold .bee-card { 
  background: rgba(255, 255, 255, 0.65) !important; /* 統一為亮色磨砂玻璃 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  --accent-color: #bfa05f; 
  --glow-color: rgba(191, 160, 95, 0.2);
  --card-primary-color: #bfa05f; /* 鈦金主題色 */
  --card-secondary-color: #d4af6f; /* 鈦金輔助色 */
}
.slide-blue .bee-card { 
  background: rgba(255, 255, 255, 0.65) !important; /* 統一為亮色磨砂玻璃 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  --accent-color: #4a6d8c; 
  --glow-color: rgba(74, 109, 140, 0.2);
  --card-primary-color: #4a6d8c; /* 太平洋藍主題色 */
  --card-secondary-color: #6b8fa8; /* 太平洋藍輔助色 */
}
.slide-green .bee-card { 
  background: rgba(255, 255, 255, 0.65) !important; /* 統一為亮色磨砂玻璃 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  --accent-color: #4e5c4e; 
  --glow-color: rgba(78, 92, 78, 0.2);
  --card-primary-color: #4e5c4e; /* 松嶺綠主題色 */
  --card-secondary-color: #6b7d6b; /* 松嶺綠輔助色 */
}
.slide-purple .bee-card { 
  background: rgba(255, 255, 255, 0.65) !important; /* 統一為亮色磨砂玻璃 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  --accent-color: #5e4b6e; 
  --glow-color: rgba(94, 75, 110, 0.2);
  --card-primary-color: #5e4b6e; /* 深紫主題色 */
  --card-secondary-color: #7a5f8a; /* 深紫輔助色 */
}

/* 5. 淺鈦銀色 (支援機型 - 風格修正) - 統一為亮色磨砂玻璃 */
.slide-titanium .bee-card { 
  background: rgba(255, 255, 255, 0.65) !important; /* 統一為亮色磨砂玻璃 */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  --card-primary-color: #4b5563; /* 深灰主題色 */
  --card-secondary-color: #9ca3af; /* 淺灰輔助色 */
  --accent-color: #4b5563;
  --glow-color: rgba(75, 85, 99, 0.1);
}

/* 針對鈦金屬卡片的按鈕微調，確保對比度 */
.slide-titanium .polygon-btn {
    background-color: #4b5563;
    color: #fff;
}

.slide-titanium .polygon-btn:hover {
    background-color: #374151;
}

/* 5萬金錢數字特效 */
.price-number {
  font-family: "Helvetica Neue", sans-serif; /* 數字用無襯線字體更好看 */
  font-weight: 900;
  background: linear-gradient(180deg, #F8b62d 0%, #d9960a 100%); /* 金色漸層 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(248, 182, 45, 0.3)); /* 柔和發光 */
  line-height: 1;
}

/* 文字排版 */
.card-content {
  width: 40%;
  z-index: 10;
}

.hero-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-tag::before {
    content: ''; width: 20px; height: 1px; background: var(--accent-color);
}

/* 內文段落優化 */
.bee-card p,
.bee-card .description,
.bee-card .hero-desc p {
    color: #515154 !important;
    font-weight: 400;
}

/* 小標籤/Tag (例如 "#1 CORE SERVICE") */
.bee-card .hero-tag,
.bee-card .tag-line,
.bee-card .subtitle {
    color: #404142 !important; /* 更淺的灰色 */
    font-weight: 600;
    letter-spacing: 2px;
}

.fashion-title {
  font-family: "Helvetica Neue", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--main-text);
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.hero-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #515154 !important; /* 深灰色，適應亮色背景 */
  margin-bottom: 40px;
  max-width: 400px;
}

/* 3. 按鈕樣式配合亮色磨砂玻璃風格 */
.fashion-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  /* 主按鈕：改為淺灰色底深色字，創造柔和時尚感 */
  background: #404142 !important; /* 淺灰色 */
  color: #ffffff !important;
  border: none;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.fashion-btn:hover {
  background: #0B1120 !important; /* hover 時稍深一點的灰色 */
  padding-right: 40px; /* Hover 時伸長 */
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.fashion-btn ion-icon { transition: transform 0.3s; }
.fashion-btn:hover ion-icon { transform: translateX(5px); }

/* 次要按鈕：改為深色細框線，透明底 */
.bee-card .fashion-btn[style*="background: rgba(255, 255, 255, 0.1)"] {
    background: transparent !important;
    border: 1px solid #d2d2d7 !important; /* 淺灰框線 */
    color: #1d1d1f !important;
    box-shadow: none;
}
.bee-card .fashion-btn[style*="background: rgba(255, 255, 255, 0.1)"]:hover {
    border-color: #1d1d1f !important; /* hover 時框線變深 */
    background: rgba(0,0,0,0.03) !important;
    transform: translateY(-2px);
}

/* 2. 卡片內文字層級優化 */
.bee-card h1, 
.bee-card h2, 
.bee-card h3,
.bee-card .glitch-title {
    color: #404142 !important; /* 更淺的深灰色 */
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* --- 標題風格統整 (深色主體 + 彩色霓虹殘影) --- */
.glitch-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  margin: 15px 0 25px;
  position: relative;
  text-transform: uppercase;
  /* 關鍵 1: 主標題統一為深黑色，適應亮色背景 */
  color: #404142 !important; /* 更淺的深灰色 */ 
}

/* H2 標籤使用深色 (適應亮色背景) */
h2.glitch-title {
  color: #404142 !important; /* 更淺的深灰色 */
}

h2.glitch-title span {
  color: #404142 !important; /* 確保 H2 內的 span 也是更淺的深灰色 */
}

/* 確保文字層級 */
.glitch-title span {
  position: relative;
  display: inline-block;
  z-index: 2; /* 主文字在最上層 */
}

/* 故障層基礎設定 (背後的影子) */
.glitch-title span::before,
.glitch-title span::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0; /* 平常隱藏 */
  z-index: -1; /* 藏在文字背後 */
}

/* 第一層殘影 */
.glitch-title span::before {
  left: -2px;
  /* 關鍵 2: 殘影使用卡片主題色 */
  color: var(--card-primary-color); 
  /* 增加一點同色系陰影，讓光暈更明顯 */
  text-shadow: 2px 0 var(--card-secondary-color);
  animation: glitch-visible-1 5s infinite linear alternate-reverse;
}

/* 第二層殘影 */
.glitch-title span::after {
  left: 2px;
  /* 關鍵 2: 殘影使用卡片主題色 */
  color: var(--card-primary-color);
  text-shadow: -2px 0 var(--card-secondary-color);
  animation: glitch-visible-2 4s infinite linear alternate-reverse;
}

/* Glitch 動畫 Keyframes */
@keyframes glitch-visible-1 {
  0%, 90% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0; }
  91% { clip-path: inset(20% 0 80% 0); transform: translate(-4px, 2px); opacity: 1; }
  92% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); opacity: 1; }
  93% { clip-path: inset(40% 0 50% 0); transform: translate(-3px, 1px); opacity: 1; }
  94%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0; }
}

@keyframes glitch-visible-2 {
  0%, 88% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0; }
  89% { clip-path: inset(10% 0 60% 0); transform: translate(3px, -2px); opacity: 1; }
  90% { clip-path: inset(80% 0 5% 0); transform: translate(-3px, 2px); opacity: 1; }
  91% { clip-path: inset(30% 0 20% 0); transform: translate(4px, 1px); opacity: 1; }
  92%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: 0; }
}

/* Glow Background (用於鈦金屬卡片) */
.glow-bg {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: var(--glow-color, rgba(75, 85, 99, 0.1));
  filter: blur(80px);
  z-index: 1;
}


/* 右側展示區 */
.card-image-wrapper {
  width: 55%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px; /* 開啟 3D 空間 */
}

/* 4. 手機圖片優化 (配合亮色背景) */
.bee-card img.phone-mockup,
.bee-card .hero-image img,
.bee-card .css-iphone-pro {
     /* 之前的投影太深，改為柔和擴散的投影 */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}

/* 背景光暈 */
.glow-spot {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--glow-color);
  filter: blur(100px);
  border-radius: 50%;
  z-index: 0;
  animation: breathe 6s infinite alternate;
}

/* --- 純 CSS iPhone Pro (極致擬真版) --- */
/* 目標：模擬 iPhone 15/16 Pro 鈦金屬質感與極窄邊框 */

.css-iphone-pro {
    /* 1. 尺寸與外型 */
    width: 260px; /* 稍微加寬，視覺張力更好 */
    height: 530px; 
    border-radius: 54px; /* 更大的圓角，模擬連續曲率 (Squircle) */
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 加入彈性過渡 */

    /* 2. 螢幕背景 (預設全黑 OLED) */
    background: #000000;

    /* 3. 關鍵：鈦金屬邊框模擬 (Titanium Frame) */
    /* 我們不只用 border，而是用 box-shadow 堆疊出金屬厚度與黑邊 */
    border: 0; /* 移除原本的 border */
    
    /* 深空黑邊框版本 (Space Black) */
    box-shadow: 
        inset 0 0 0 2px #000000, 
        inset 0 0 0 3px rgba(255, 255, 255, 0.15), 
        0 0 0 4px #2a2a2a, /* 深黑色鈦金屬框 */
        0 0 0 5px rgba(255, 255, 255, 0.05),
        0 30px 60px -15px rgba(0, 0, 0, 0.5),
        -6px 80px 0 -4px #1a1a1a,
        -6px 120px 0 -2px #1a1a1a,
        -6px 160px 0 -2px #1a1a1a,
        6px 130px 0 -2px #1a1a1a;

    /* 4. 強制裁切溢出內容（確保圓角生效） */
    overflow: hidden !important;
    isolation: isolate; /* 建立新的堆疊上下文，確保 Safari/iOS 相容性 */
    contain: layout style paint; /* 效能優化：限制重繪範圍 */
}

/* --- 動態島 (Dynamic Island) --- */
.css-iphone-pro::before {
    content: ''; 
    position: absolute; 
    top: 18px; 
    left: 50%;
    transform: translateX(-50%);
    width: 96px; 
    height: 28px; 
    background: #000; 
    border-radius: 20px; /* 更圓潤 */
    z-index: 20;
    
    /* 動態島的光影細節 */
    box-shadow: 
        0 0 0 1px #1a1a1a, /* 微弱邊框區分島與螢幕 */
        0 0 10px rgba(0,0,0,0.5); /* 內部深邃感 */
}

/* --- 頂級玻璃反光 (Glossy Reflection) --- */
/* 讓手機看起來像有一層玻璃覆蓋 */
.css-iphone-pro::after {
    content: ''; 
    position: absolute; 
    inset: 4px; /* 避開金屬框 */
    border-radius: 48px;
    
    /* 複雜的漸層模擬玻璃曲面反光 */
    background: linear-gradient(
        105deg, 
        rgba(255,255,255,0) 20%, 
        rgba(255,255,255,0.07) 40%, 
        rgba(255,255,255,0.12) 45%, 
        rgba(255,255,255,0.05) 50%, 
        rgba(255,255,255,0) 70%
    );
    pointer-events: none; /* 讓點擊穿透 */
    z-index: 10;
}

/* 攝像頭模組 (純 CSS 畫圓) */
.camera-bump {
    position: absolute;
    top: 20px; left: 20px;
    width: 80px; height: 80px;
    background: #1a1a1a;
    border-radius: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    gap: 4px;
    opacity: 0; /* 預設隱藏，背面顯示 */
}
.cam-lens { width: 100%; height: 100%; background: #000; border-radius: 50%; border: 2px solid #333; }

/* --- 螢幕 UI 容器 --- */
/* 確保內容不會貼到圓角 */
.screen-ui {
    width: 100%;
    height: 100%;
    padding: 60px 24px 40px; /* 上方留出動態島空間 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 內容垂直居中 */
    color: #fff;
    z-index: 5;
    
    /* 確保內容不會溢出圓角 */
    border-radius: inherit; /* 繼承父元素的圓角 */
    overflow: hidden; /* 額外保險：確保內容被裁切 */
    
    /* 螢幕微光 (模擬 OLED 發光感) */
    background: radial-gradient(
        circle at 50% 30%, 
        rgba(255, 255, 255, 0.03) 0%, 
        transparent 60%
    );
}

.screen-ui ion-icon { 
    font-size: 4.5rem; 
    color: var(--card-primary-color, #F8b62d); /* 使用變數，若無則預設金 */
    filter: drop-shadow(0 0 15px rgba(248, 182, 45, 0.4)); /* ICON 自體發光 */
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

/* 文字優化 */
.screen-ui span {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    letter-spacing: 0.5px;
}
.screen-ui span:first-of-type {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}
.screen-ui span:last-of-type {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

/* --- 場景特化動畫 --- */

/* Slide 1: 旗艦單機 (懸浮) */
.scene-flagship .css-iphone-pro {
    animation: float 6s ease-in-out infinite;
}

/* Slide 2: 舊換租 (雙機前後) */
.scene-tradein { display: flex; justify-content: center; align-items: center; }
.scene-tradein .phone-old {
    position: absolute;
    transform: translateX(-80px) scale(0.9) rotate(-5deg);
    filter: brightness(0.5); /* 舊機變暗 */
    z-index: 1;
    animation: tradeInBack 4s ease-in-out infinite alternate;
    border-color: #555;
}
.scene-tradein .phone-new {
    position: absolute;
    transform: translateX(60px) scale(1.05) rotate(5deg);
    z-index: 3;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border-color: #f5f5f7; /* 新機白邊 */
    animation: tradeInFront 4s ease-in-out infinite alternate;
}

/* Slide 3: 維修 (掃描線) */
.scene-repair .css-iphone-pro {
    border-color: #2a2a2a;
}
.scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: #4ade80;
    box-shadow: 0 0 20px #4ade80;
    animation: scan 2s linear infinite;
    z-index: 20;
}

/* Slide 4: 企業 (三機扇形) */
.scene-business { position: relative; width: 300px; height: 500px; }
.scene-business .phone-1 {
    position: absolute; transform: translateX(0) translateY(0); z-index: 3;
    animation: fan1 5s ease-in-out infinite;
}
.scene-business .phone-2 {
    position: absolute; transform: translateX(-60px) translateY(20px) rotate(-15deg) scale(0.9); z-index: 2; opacity: 0.8;
    animation: fan2 5s ease-in-out infinite;
}
.scene-business .phone-3 {
    position: absolute; transform: translateX(60px) translateY(20px) rotate(15deg) scale(0.9); z-index: 1; opacity: 0.8;
    animation: fan3 5s ease-in-out infinite;
}

/* 動畫 Keyframes */
@keyframes float { 0%, 100% { transform: translateY(-15px); } 50% { transform: translateY(15px); } }
@keyframes breathe { 0% { transform: scale(0.9); opacity: 0.2; } 100% { transform: scale(1.1); opacity: 0.4; } }
@keyframes tradeInFront { 0% { transform: translateX(60px) rotate(5deg); } 100% { transform: translateX(50px) rotate(3deg); } }
@keyframes tradeInBack { 0% { transform: translateX(-80px) rotate(-5deg); } 100% { transform: translateX(-70px) rotate(-3deg); } }
@keyframes scan { 0% { top: 5%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 95%; opacity: 0; } }
@keyframes fan1 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(0) translateY(-10px); } }
@keyframes fan2 { 0%, 100% { transform: translateX(-60px) translateY(20px) rotate(-15deg) scale(0.9); } 50% { transform: translateX(-40px) translateY(20px) rotate(-10deg) scale(0.9); } }
@keyframes fan3 { 0%, 100% { transform: translateX(60px) translateY(20px) rotate(15deg) scale(0.9); } 50% { transform: translateX(40px) translateY(20px) rotate(10deg) scale(0.9); } }

/* 多邊形按鈕 (Clip-path) */
.polygon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 161px;
  height: 81px;
  background-color: var(--card-primary-color);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  clip-path: polygon(
    7.68786px 20.1081px, 7.68786px 20.1081px, 8.16364px 18.1351px, 8.88914px 16.2804px, 9.8446px 14.5617px, 11.0103px 12.9969px, 12.3663px 11.6038px, 13.8931px 10.4002px, 15.5708px 9.4038px, 17.3796px 8.63251px, 19.2998px 8.10411px, 21.3116px 7.83638px, 132.489px 0.710935px, 132.489px 0.710935px, 134.441px 0.714334px, 136.343px 0.968456px, 138.174px 1.46024px, 139.914px 2.17663px, 141.544px 3.10456px, 143.044px 4.23098px, 144.393px 5.54282px, 145.572px 7.02703px, 146.562px 8.67054px, 147.341px 10.4603px, 159.738px 44.9529px, 159.738px 44.9529px, 160.432px 47.6413px, 160.613px 50.3152px, 160.314px 52.9198px, 159.569px 55.4005px, 158.412px 57.7025px, 156.877px 59.7713px, 154.996px 61.5521px, 152.804px 62.9903px, 150.334px 64.0311px, 147.621px 64.62px, 16.6807px 80.5984px, 16.6807px 80.5984px, 13.7927px 80.6726px, 11.051px 80.2112px, 8.50526px 79.2659px, 6.20477px 77.8885px, 4.19901px 76.131px, 2.53742px 74.045px, 1.26946px 71.6825px, 0.444554px 69.0952px, 0.11216px 66.335px, 0.321718px 63.4536px, 7.68786px 20.1081px
  );
  transition: all 0.3s ease;
}

/* 修復後的按鈕 Hover 樣式 (移除 border) */
.polygon-btn:hover {
  background-color: #fff;
  color: var(--card-primary-color);
  /* border: 1px solid ...;  <-- 已移除此行，消除邊緣鋸齒 */
  transform: scale(1.05); /* 保持輕微放大的互動感 */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* 改用發光陰影來增加層次，不會破圖 */
}

/* 簡潔箭頭 */
.slider-button {
	position: absolute;
	width: 60px;
	height: 60px;
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	transition: opacity 0.3s ease;
	/* 擴大點擊範圍，提升手機操作體驗 */
}

.slider-button::after {
	content: '';
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: -10px;
	right: -10px;
}
.slider-button-prev {
	left: 40px;
}
.slider-button-next {
	right: 40px;
}
.slider-button svg {
	display: block;
	width: 100%;
	height: 100%;
}
.slider-button circle,
.slider-button path {
	transition: stroke 0.3s ease;
}
.slider-button:hover circle,
.slider-button:hover path {
	stroke: var(--accent-color);
}
.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* 動畫 Keyframes (保持原作) */
@keyframes floatAnim {
	0% {
		transform: translateY(-25px);
	}
	50% {
		transform: translateY(25px);
	}
	100% {
		transform: translateY(-25px);
	}
}

/* Glitch 動畫關鍵幀 (保持不變，因為頻率已在上方調整) */
@keyframes glitch-1 {
	0% { clip: rect(40px, 800px, 70px, 0px); opacity: 0.2; }
	15% { clip: rect(130px, 800px, 131px, 0px); opacity: 0.4; }
	50% { clip: rect(90px, 800px, 96px, 0px); opacity: 0.3; }
	75% { clip: rect(125px, 800px, 185px, 0px); opacity: 0.5; }
	87% { clip: rect(70px, 800px, 100px, 0px); opacity: 0.2; }
	100% { clip: rect(130px, 800px, 130px, 0px); opacity: 0; } /* 結束時完全消失 */
}

@keyframes glitch-2 {
	0% { clip: rect(20px, 800px, 80px, 0px); opacity: 0.1; }
	15% { clip: rect(100px, 800px, 105px, 0px); opacity: 0.3; }
	50% { clip: rect(100px, 800px, 95px, 0px); opacity: 0.2; }
	75% { clip: rect(60px, 800px, 60px, 0px); opacity: 0.4; }
	87% { clip: rect(145px, 800px, 160px, 0px); opacity: 0.1; }
	100% { clip: rect(185px, 800px, 185px, 0px); opacity: 0; } /* 結束時完全消失 */
}

@keyframes mouseScroll {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(14px);
	}
}

/* --- 手機版 RWD (max-width: 900px) --- */
@media (max-width: 900px) {

  /* 1. 外層容器：給予上下呼吸空間 */
  .hero-slider-section {
    height: auto;
    min-height: auto;
    padding-top: 40px;   /* 頂部適度留白 */
    padding-bottom: 40px;
  }

  /* 2. Swiper 調整 */
  .swiper {
    padding: 0 20px 40px 20px; /* 左右留白，下方留給分頁點 */
  }

  /* 3. 卡片本體：設定適當的 min-height 確保一致性 - 統一為亮色磨砂玻璃 */
  .bee-card {
    flex-direction: column;
    height: auto;
    /* 設定一個適中的高度，因為按鈕並排了，不需要太高 */
    min-height: 520px;       
    padding: 40px 20px;      /* 左右內距稍微縮小，讓按鈕空間大一點 */
    text-align: center;
    /* 統一為亮色磨砂玻璃風格 */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 32px;
    box-shadow: 
      0 20px 40px rgba(0,0,0,0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    justify-content: space-between; 
  }
  
  /* 針對鈦金屬主題的卡片背景修正 - 統一為亮色磨砂玻璃 */
  .slide-titanium .bee-card {
     background: rgba(255, 255, 255, 0.65) !important;
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);
  }

  /* 圖片區域 */
  /* --- 手機版 RWD 修正 (.card-image-wrapper) --- */
  .bee-card .card-image-wrapper {
    width: 100%;
    /* 修正點：高度加大到 340px，容納手機投影與浮動動畫 */
    height: 340px !important; 
    
    order: -1; /* 圖片排在上面 */
    margin-bottom: 20px; /* 修正點：增加下邊距，把文字往下推 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
    z-index: 1; 
  }
  
  /* 手機版 iPhone - 極致擬真版 RWD */
  .css-iphone-pro {
    /* 手機版等比縮小 */
    width: 160px;
    height: 326px; /* 約 1:2.04 */
    border-radius: 36px;
    
    /* 手機版邊框：深空黑版本，邊框更薄 */
    box-shadow: 
        inset 0 0 0 2px #000000, 
        inset 0 0 0 3px rgba(255, 255, 255, 0.15), 
        0 0 0 3px #2a2a2a, 
        0 20px 40px -10px rgba(0, 0, 0, 0.4),
        -4px 50px 0 -2px #1a1a1a,
        -4px 75px 0 -1px #1a1a1a,
        -4px 100px 0 -1px #1a1a1a,
        4px 80px 0 -1px #1a1a1a;
  }

  .css-iphone-pro::before {
    top: 12px; 
    width: 60px; 
    height: 18px; 
    border-radius: 12px;
  }
  
  .css-iphone-pro::after { 
    inset: 3px; 
    border-radius: 33px; 
  }
  
  .screen-ui {
    padding: 35px 15px 20px;
  }
  
  .screen-ui ion-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  
  .screen-ui span:first-of-type { font-size: 14px; }
  .screen-ui span:last-of-type { font-size: 10px; }

  /* 確保文字層級正確 */
  .bee-card .card-content {
    width: 100%;
    margin-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 10; 
  }

  /* 標題與文字調整 */
  .glitch-title {
    font-size: 32px !important;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 15px;
    margin-bottom: 30px; /* 增加與按鈕的距離 */
    padding: 0 10px;
  }

  /* 6. 按鈕區域：改為「並排」以確保卡片等高 */
  .card-content .flex {
    flex-direction: row !important;  /* 關鍵：改回水平排列 */
    flex-wrap: nowrap;               /* 禁止換行，強制在一行內 */
    width: 100%;
    gap: 8px;                        /* 按鈕間距縮小，讓按鈕本體可以大一點 */
    margin-top: auto;
  }

  .fashion-btn {
    /* 關鍵優化：讓按鈕自動填滿剩餘空間 */
    flex: 1;                         
    width: auto;                     /* 取消固定寬度 */
    justify-content: center;
    padding: 12px 4px;               /* 減少左右內距，避免文字太長爆掉 */
    font-size: 13px;                 /* 字體微調，確保兩顆按鈕放得下 */
    border-radius: 16px;             /* 稍微方一點的圓角，在並排時比較好看 */
    height: 48px;                    /* 固定高度，好點擊 */
    white-space: nowrap;             /* 防止文字換行 */
    overflow: hidden;                /* 防止超出 */
    text-overflow: ellipsis;
  }

  /* 7. 隱藏不必要的元素 */
  .slider-button {
    display: none !important; /* 手機版隱藏左右箭頭 */
  }
  
  .swiper-pagination {
    bottom: 0px !important;   /* 分頁點位置 */
  }

  /* --- 手機螢幕內的中文優化 (RWD) --- */
  .screen-ui span {
    font-family: "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 加強陰影，讓字浮在螢幕上 */
  }

  /* 針對鈦金屬(淺色背景)的文字顏色修正 */
  .slide-titanium .screen-ui span {
      color: #374151; /* 深灰色文字 */
      text-shadow: none; /* 淺色背景不需要陰影 */
  }

  /* 8. 見證方塊 (3D Cube) 放大術 */
  .testimonial-section {
    padding-top: 60px;   /* 減少上方留白，讓標題更緊湊 */
    padding-bottom: 80px;
    overflow: visible;   /* 關鍵：允許方塊陰影超出容器，不會被切掉 */
  }

  /* 調整 Swiper 容器尺寸 - 讓它變大！ */
  .testimonial-section .swiper {
    width: 280px !important;  /* 手機版寬度加大 (原可能被壓縮) */
    height: 380px !important; /* 高度加大，讓內容不擁擠 */
    margin: 0 auto;           /* 水平置中 */
    padding: 0 !important;    /* 移除多餘內距 */
    overflow: visible;        /* 讓 3D 效果不被切到 */
  }

  /* 調整方塊內的圖片與遮罩圓角 */
  .testimonial-section .swiper-slide {
    border-radius: 24px;      /* 更圓潤的導角，符合 iOS 風格 */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3); /* 增加立體懸浮感 */
  }

  /* 調整方塊內的文字大小 */
  .testimonial-section .overlay {
    padding: 24px;            /* 內距調整 */
  }
  .testimonial-section .overlay h1 {
    font-size: 1.5rem;        /* 名字大小適中 */
  }
  .testimonial-section .overlay .desc {
    font-size: 0.95rem;       /* 內文易讀 */
    line-height: 1.4;
    display: -webkit-box;     /* 防止文字過多溢出 */
    -webkit-line-clamp: 4;
    line-clamp: 4;            /* 標準屬性，提升兼容性 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 調整背景裝飾 (避免干擾視覺) */
  .testimonial-section .absolute {
    opacity: 0.6; /* 降低背景光暈亮度，凸顯方塊 */
  }
}

/* 純 CSS 手機 */
.css-iphone {
  width: 220px;
  height: 440px;
  border-radius: 36px;
  background: #000;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1), 0 15px 30px rgba(0,0,0,0.2); /* 輕盈陰影 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatAnim 6s ease-in-out infinite;
}

.css-iphone::after { /* 動態島 */
  content: ''; 
  position: absolute; 
  top: 20px; 
  width: 70px; 
  height: 20px; 
  background: #111; 
  border-radius: 10px;
  z-index: 4;
}

.css-iphone .inner-icon { 
  font-size: 4rem; 
  position: absolute;
  z-index: 3;
}

/* Swiper 分頁點點 */
.swiper-pagination {
	text-align: center;
	padding-left: 0;
	bottom: 20px !important;
    z-index: 10;
}

.swiper-pagination .swiper-pagination-bullet {
	display: inline-block;
	margin: 2px;
	height: 6px;
	width: 12px;
	background: rgba(0, 0, 0, 0.2);
	color: transparent;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.5s ease;
	border: 0;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--accent-color);
	width: 25px;
}


/* 針對鈦銀卡片的描述文字顏色修正 */
.slide-titanium .hero-desc {
    color: #404142 !important; /* 更淺的灰色 */
}

/* 針對鈦銀卡片的標題文字顏色調整 */
.slide-titanium .glitch-title {
    color: #404142 !important; /* 更淺的深灰色 */
}

.slide-titanium .glitch-title span {
    color: #404142 !important; /* 更淺的深灰色 */
}

/* 針對鈦銀卡片的標籤文字顏色調整 */
.slide-titanium .hero-tag {
    color: #404142 !important; /* 更淺的灰色 */
}

/* 針對鈦銀卡片的手機螢幕數字顏色 */
.slide-titanium .screen-ui span {
    color: var(--card-primary-color);
}

/* 針對鈦銀卡片的按鈕修正 */
.slide-titanium .fashion-btn {
    background: #404142 !important; /* 淺灰色 */
    color: #fff;
}

.slide-titanium .fashion-btn:hover {
    background: #0B1120 !important; /* hover 時稍深一點的灰色 */
}

/* 多機型堆疊 ICON */
.stacked-phones-icon {
    position: relative;
    width: 60px; /* 主手機尺寸 */
    height: 120px;
    border: 2px solid var(--card-primary-color);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(75, 85, 99, 0.3); /* 跟隨卡片主題色發光 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.stacked-phones-icon::before,
.stacked-phones-icon::after {
    content: '';
    position: absolute;
    border: 1px solid var(--card-primary-color); /* 邊框 */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05); /* 輕微透明背景 */
    box-shadow: 0 0 10px rgba(75, 85, 99, 0.1);
    transition: all 0.3s ease;
}

/* 後面一台手機 */
.stacked-phones-icon::before {
    width: 50px;
    height: 100px;
    transform: translate(-30px, -15px) rotate(-10deg); /* 錯位堆疊 */
    opacity: 0.6;
    z-index: -1;
}

/* 更後面一台手機 */
.stacked-phones-icon::after {
    width: 55px;
    height: 110px;
    transform: translate(30px, 15px) rotate(10deg); /* 錯位堆疊 */
    opacity: 0.6;
    z-index: -2;
}

.stacked-phones-icon ion-icon {
    font-size: 2.5rem;
    color: var(--card-primary-color);
    filter: drop-shadow(0 0 10px rgba(75, 85, 99, 0.3)); /* 主 ICON 發光 */
}