/* ============================================
   FarBar AI Services - 響應式設計 CSS
   基於 1920px 基準設計，支援多種解析度縮放
   實作說明：本頁響應式設計的實作說明另見同目錄 .md
   ============================================ */

/* ============================================
   CSS 變數系統 - 1920px 基準設計
   ============================================ */
:root {
    /* 色彩系統 */
    --primary-gradient: linear-gradient(90deg, #1fc8ab, #5e8dfe);
    --primary-teal: #1fc8ab;
    --primary-blue: #5e8dfe;
    --bg-dark: #06161a;
    --bg-darker: #061519;
    --text-white: #fff;
    --text-gray: #c7c7c7;
    --text-muted: #63657e;
    --text-placeholder: #818182;
    --btn-purple: #503ae7;
    --btn-purple-hover: #6b52f5;
    --border-light: #dce4ec;

    /* 縮放比例 (1920px = 0.9) - 全域縮放 */
    --scale: 0.9;

    /* 間距系統 - 基於 1920px，用 max() 確保最小間距 */
    --spacing-xs: max(4px, calc(8px * var(--scale)));
    --spacing-sm: max(8px, calc(12px * var(--scale)));
    --spacing-md: max(12px, calc(16px * var(--scale)));
    --spacing-lg: max(16px, calc(24px * var(--scale)));
    --spacing-xl: max(20px, calc(32px * var(--scale)));
    --spacing-2xl: max(24px, calc(48px * var(--scale)));
    --spacing-3xl: max(32px, calc(64px * var(--scale)));
    --spacing-4xl: max(40px, calc(80px * var(--scale)));

    /* 字體大小 - 基於 1920px，用 max() 與 round() 確保最小可讀字級並對齊像素 */
    --font-xs: max(12px, round(nearest, calc(14px * var(--scale)), 2px));
    --font-sm: max(12px, round(nearest, calc(16px * var(--scale)), 2px));
    --font-md: max(14px, round(nearest, calc(18px * var(--scale)), 2px));
    --font-lg: max(14px, round(nearest, calc(20px * var(--scale)), 2px));
    --font-xl: max(16px, round(nearest, calc(24px * var(--scale)), 2px));
    --font-2xl: max(18px, round(nearest, calc(26px * var(--scale)), 2px));
    --font-3xl: max(20px, round(nearest, calc(28px * var(--scale)), 2px));
    --font-4xl: max(24px, round(nearest, calc(40px * var(--scale)), 2px));
    --font-5xl: max(28px, round(nearest, calc(48px * var(--scale)), 2px));

    /* 容器與尺寸 */
    --container-max: calc(1200px * var(--scale));
    --container-padding: calc(20px * var(--scale));
    --features-max-width: calc(1360px * var(--scale));
    --feature-image-width: calc(580px * var(--scale));
    --feature-image-height: calc(400px * var(--scale));
    --feature-gap: calc(134px * var(--scale));
    --feature-content-gap: calc(48px * var(--scale));

    /* 圓角 */
    --radius-sm: calc(5px * var(--scale));
    --radius-md: calc(13px * var(--scale));
    --radius-lg: calc(32px * var(--scale));

    /* 導航列 */
    --nav-height: calc(80px * var(--scale));
    --nav-padding: calc(36px * var(--scale));
    --logo-height: calc(36px * var(--scale));

    /* 過渡動畫 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* 字體粗細變數 */
    --font-weight-main-title: 700;
    --font-weight-subtitle: 400;
    --font-weight-section-title: 500;
    --font-weight-badge: 500;
    --font-weight-card-title: 500;
    --font-weight-card-description: 400;
    --font-weight-feature-title: 500;
    --font-weight-feature-description: 400;
    --font-weight-nav: 500;
    --font-weight-brand-slogan: 700;
    --font-weight-contact-title: 500;
    --font-weight-contact-info: 500;
}

/* ============================================
   1440px 斷點 (75% of 1920)
   ============================================ */
@media (max-width: 1440px) {
    :root {
        --scale: 0.75;
        --container-padding: 24px;
        --nav-padding: 28px;
    }
}

/* ============================================
   1366px 斷點 (71% of 1920)
   ============================================ */
@media (max-width: 1366px) {
    :root {
        --scale: 0.71;
        --container-padding: 22px;
        --nav-padding: 24px;
    }
}

/* ============================================
   1200px 斷點 (62.5% of 1920)
   ============================================ */
@media (max-width: 1200px) {
    :root {
        --scale: 0.625;
        --container-padding: 20px;
        --nav-padding: 20px;
    }
}

/* ============================================
   1080px 斷點 (56% of 1920)
   ============================================ */
@media (max-width: 1080px) {
    :root {
        --scale: 0.56;
        --container-padding: 20px;
        --nav-padding: 20px;
    }
}

/* ============================================
   CSS Reset & 基礎樣式
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.6;
    color: var(--text-white);
    background-color: var(--bg-dark);
    overflow-x: hidden;
    width: 100%;
}

html {
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input,
textarea {
    font-family: inherit;
    border: none;
    outline: none;
}

/* ============================================
   導航列 - 使用共用 CSS
   樣式請見 ../shared/header-nav.css
   ============================================ */

/* ============================================
   Hero 區域 - 1920px 基準
   ============================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: calc(600px * var(--scale));
    max-height: calc(900px * var(--scale));
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.hero-overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(237px * var(--scale));
    background: linear-gradient(180deg, var(--bg-darker) 32.21%, rgba(9, 61, 75, 0.25) 73.56%, rgba(7, 41, 50, 0));
    z-index: -1;
}

.hero-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(237px * var(--scale));
    background: linear-gradient(0deg, var(--bg-darker) 32.21%, rgba(0, 14, 17, 0.5) 62.98%, rgba(7, 41, 50, 0));
    z-index: -1;
}

.hero-content {
    width: 100%;
    /* 讓 Hero 內容寬度與 Feature Grid 總寬度一致：(單欄寬 * 2) + 間距 */
    /* 這樣可確保 Hero 左側邊緣與下方第一張卡片的左邊緣對齊 */
    max-width: calc((var(--feature-image-width) * 2) + var(--feature-gap));
    margin: 0 auto;
    padding: 0;
    /* 移除左右 Padding，改用 max-width + margin auto 控制水平位置 */
    padding-top: calc(274px * var(--scale));
    /* 保持垂直定位 */
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--scale));
}

.hero-title {
    font-size: var(--font-5xl);
    font-weight: var(--font-weight-main-title);
    line-height: 1.4;
}

.hero-description {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-subtitle);
    line-height: 1.6;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: calc(120px * var(--scale));
}

.hero-brand-icon {
    width: calc(143px * var(--scale));
}

.hero-subtitle {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-brand-slogan);
    line-height: 1.4;
}

/* ============================================
   主要內容區 - 1920px 基準
   ============================================ */
.main-content {
    position: relative;
    background-color: var(--bg-dark);
    overflow: hidden;
    /* 限制溢出的處理 */
}

/* ============================================
   專案經歷區塊 (Services Section)
   ============================================ */
.services-section {
    padding: calc(80px * var(--scale)) var(--container-padding);
    max-width: calc(1360px * var(--scale));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40px * var(--scale));
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(6px * var(--scale)) calc(20px * var(--scale));
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid rgba(31, 200, 171, .5);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    width: auto;
    height: auto;
    white-space: nowrap;
}


.badge-text {
    font-size: var(--font-xs);
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .08em;
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.badge-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--primary-teal), var(--primary-blue));
    filter: blur(84px);
    z-index: 0;
}

.section-title {
    font-size: var(--font-4xl);
    font-weight: var(--font-weight-section-title);
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 主色漸層標題樣式 (與 farbarAi-responsive 一致) */
.intro-title {
    font-size: var(--font-4xl);
    font-weight: var(--font-weight-section-title);
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--spacing-md);
}

.section-title-white {
    font-size: var(--font-4xl);
    font-weight: var(--font-weight-section-title);
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: var(--font-xl);
    color: var(--text-gray);
    line-height: 1.6;
    max-width: calc(1200px * var(--scale));
    text-align: center;
    margin: 0 auto;
}

/* 服務卡片容器 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24px * var(--scale));
    width: 100%;
}

/* 服務卡片 */
.service-card {
    position: relative;
    /* 改為 auto 讓高度能根據內容（如換行文字）自動撐開 */
    height: auto;
    /* 保留最小高度，維持大螢幕的設計比例 */
    min-height: calc(344px * var(--scale));
    transition: transform var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-8px);
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: calc(28px * var(--scale));
    padding: calc(40px * var(--scale)) calc(32px * var(--scale));
}

.card-icon {
    width: calc(72px * var(--scale));
    height: calc(72px * var(--scale));
    border-radius: var(--radius-md);
    background-color: rgba(60, 70, 87, 0.2);
    border: 2px solid var(--primary-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon img {
    width: calc(52px * var(--scale));
    height: calc(52px * var(--scale));
    object-fit: contain;
}

.card-icon-orange {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.card-icon-purple {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.card-title {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-card-title);
    line-height: 1.2;
}

.card-description {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-card-description);
    color: var(--text-gray);
    line-height: 1.6;
}

.card-glow {
    position: absolute;
    top: 50%;
    right: calc(40px * var(--scale));
    transform: translateY(-50%);
    width: calc(242px * var(--scale));
    height: calc(242px * var(--scale));
    filter: blur(120px);
    border-radius: 50%;
    background: var(--primary-gradient);
    opacity: 0.3;
    mix-blend-mode: color-dodge;
    z-index: 0;
}

/* 模糊光暈效果 */
.blur-effect {
    position: absolute;
    border-radius: 50%;
    filter: blur(256px);
    pointer-events: none;
    z-index: -1;
    /* 防止溢出造成水平滾動條 */
    max-width: 100vw;
    overflow: hidden;
}

.blur-1 {
    width: calc(905px * var(--scale));
    height: calc(905px * var(--scale));
    background: var(--primary-gradient);
    top: calc(1429px * var(--scale));
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: color-dodge;
}

.blur-2 {
    width: calc(600px * var(--scale));
    height: calc(600px * var(--scale));
    background: rgba(94, 141, 254, 0.5);
    top: calc(2100px * var(--scale));
    right: 10%;
}

/* ============================================
   資安實績區塊 (Security Section)
   ============================================ */
.security-section {
    padding: calc(80px * var(--scale)) var(--container-padding);
    max-width: calc(1360px * var(--scale));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40px * var(--scale));
}

.security-content {
    display: grid;
    grid-template-columns: calc(580px * var(--scale)) 1fr;
    gap: calc(120px * var(--scale));
    align-items: center;
    width: 100%;
}

.security-features {
    display: flex;
    flex-direction: column;
    gap: calc(40px * var(--scale));
}

.security-item {
    display: flex;
    align-items: flex-start;
    gap: calc(28px * var(--scale));
}

.security-icon {
    width: calc(72px * var(--scale));
    height: calc(72px * var(--scale));
    border-radius: var(--radius-md);
    background-color: rgba(60, 70, 87, 0.2);
    border: 2px solid var(--primary-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.security-icon img {
    width: calc(52px * var(--scale));
    height: calc(52px * var(--scale));
    object-fit: contain;
}

.security-icon-blue {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.security-icon-green {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.security-title {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-feature-title);
    line-height: 1.2;
}

.security-description {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-feature-description);
    color: var(--text-gray);
    line-height: 1.6;
}

.security-image {
    width: 100%;
}

.security-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* ============================================
   在地部署區塊 (Deployment Section)
   ============================================ */
.deployment-section {
    padding: calc(80px * var(--scale)) var(--container-padding);
    max-width: calc(1360px * var(--scale));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40px * var(--scale));
}

.deployment-grid {
    display: flex;
    gap: calc(24px * var(--scale));
    width: 100%;
    padding: calc(61px * var(--scale)) calc(36px * var(--scale));
    background: var(--primary-gradient);
    border-radius: var(--radius-md);
    box-shadow:
        0px calc(7.14px * var(--scale)) calc(8.92px * var(--scale)) calc(-5.35px * var(--scale)) rgba(31, 200, 171, 0.3),
        0px calc(17.84px * var(--scale)) calc(22.3px * var(--scale)) calc(-4.46px * var(--scale)) rgba(31, 200, 171, 0.3),
        0px 0px 0px calc(7.14px * var(--scale)) rgba(255, 255, 255, 0.05);
}

.deployment-card {
    flex: 1;
    background: rgba(17, 24, 39, 0.75);
    border-radius: var(--radius-md);
    padding: calc(36px * var(--scale)) calc(20px * var(--scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24px * var(--scale));
    box-shadow:
        0px 0px 0px calc(3.57px * var(--scale)) rgba(255, 255, 255, 0.1),
        0px calc(3.57px * var(--scale)) calc(26.76px * var(--scale)) calc(3.57px * var(--scale)) rgba(0, 0, 0, 0.5);
}

.deployment-icon {
    width: calc(72px * var(--scale));
    height: calc(72px * var(--scale));
    border-radius: var(--radius-md);
    background-color: rgba(60, 70, 87, 0.2);
    border: 2px solid var(--primary-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.deployment-icon img {
    width: calc(52px * var(--scale));
    height: calc(52px * var(--scale));
    object-fit: contain;
}

.deployment-icon-orange {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.deployment-icon-purple {
    /* 統一使用青綠色邊框 */
    border-color: var(--primary-teal);
}

.deployment-title {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-feature-title);
    line-height: 1.2;
    text-align: center;
}

.deployment-description {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-feature-description);
    line-height: 1.6;
    text-align: center;
}

/* ============================================
   聯絡我們區塊 - 使用共用 CSS
   樣式請見 ../shared/contact-section.css
   ============================================ */
.contact-section {
    /* Calculated Spacing: 
       Original Gap = 212px
       Current Prev Section Padding Bottom = 80px (var(--spacing-4xl))
       Required Margin Top = 212px - 80px = 132px
    */
    margin-top: calc(132px * var(--scale));
    padding-bottom: var(--spacing-4xl);
    width: 100%;
    display: block;
}

/* ============================================
   響應式設計 - 1440px
   ============================================ */
@media (max-width: 1440px) {
    .nav-links {
        gap: var(--spacing-lg);
    }
}

/* ============================================
   響應式設計 - 1366px
   ============================================ */
@media (max-width: 1366px) {
    .security-content {
        grid-template-columns: 1fr 1fr;
        gap: calc(60px * var(--scale));
    }
}

/* ============================================
   響應式設計 - 1200px
   ============================================ */
@media (max-width: 1200px) {
    /* 導航列樣式由共用 CSS 提供 */
}

/* ============================================
   響應式設計 - 1080px
   ============================================ */
@media (max-width: 1080px) {
    :root {
        --scale: 0.56;
    }

    /* 針對 1080px 調整資安區塊的網格比例，讓左側文字區塊加寬，避免換行變 3 行 */
    /* 針對 1080px 調整資安區塊的網格比例，讓左側文字區塊加寬，避免換行變 3 行 */
    .security-content {
        grid-template-columns: 1.1fr 1fr;
    }

    /* 恢復卡片內部上下間距，讓文字有充足的留白空間，同時不限制文字長度 */
    .card-content {
        padding: calc(40px * var(--scale)) calc(32px * var(--scale));
        gap: calc(16px * var(--scale));
    }
}

/* ============================================
   響應式設計 - 960px（與 1080px 類似處理）
   ============================================ */
@media (max-width: 960px) {
    :root {
        --scale: 0.52;
        --nav-height: 70px;
    }

    /* 導航列樣式由共用 CSS 提供 */

    /* 資安區塊調整 */
    .security-content {
        gap: calc(40px * var(--scale));
    }
}

/* ============================================
   響應式設計 - 768px（平板／手機過渡）
   ============================================ */
@media (max-width: 768px) {
    :root {
        --scale: 0.48;
        --nav-height: 64px;
    }

    /* 導航列樣式由共用 CSS 提供 */

    /* Hero 手機版 - 恢復垂直置中 */
    .hero {
        min-height: 400px;
        max-height: 600px;
        height: auto;
        align-items: center;
    }

    .hero-bg {
        object-position: left center;
    }

    .hero-content {
        max-width: 90%;
        margin: 0 auto;
        padding: calc(100px) 20px 40px;
        text-align: center;
    }

    .hero-title {
    }

    .hero-description {
    }

    .hero-brand {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        margin-top: 40px;
    }

    .hero-brand-icon {
        width: 100px;
    }

    /* 服務卡片 - 垂直堆疊 */
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 16px;
    }

    .service-card {
        position: relative;
        height: auto;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        min-height: unset;
        background: none;
        border: none;
        border-radius: 0;
    }

    /* 恢復 SVG 背景 */
    .card-bg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    .card-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        padding: 36px 32px;
    }

    .card-icon {
        width: 64px;
        height: 64px;
    }

    .card-icon img {
        width: 44px;
        height: 44px;
    }

    .card-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-title {
    }

    .card-description {
        text-align: center;
        line-height: 1.6;
    }

    .card-glow {
        display: none;
    }

    /* 資安區塊 - 垂直堆疊 */
    .security-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
        padding: 0 16px;
    }

    .security-features {
        align-items: flex-start;
        max-width: 424px;
        margin: 0 auto;
    }

    .security-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        max-width: 100%;
    }

    .security-icon {
        width: 56px;
        height: 56px;
    }

    .security-icon img {
        width: 40px;
        height: 40px;
    }

    .security-title {
    }

    .security-description {
    }

    .security-image {
        order: -1;
        width: 100%;
        max-width: 424px;
        margin: 0 auto;
    }

    /* 部署區塊 - 垂直堆疊 */
    .deployment-grid {
        flex-direction: column;
        padding: 24px 16px;
        max-width: 424px;
        margin: 0 auto;
    }

    .deployment-card {
        padding: 24px 16px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 20px;
        row-gap: 4px;
        align-items: center;
        text-align: left;
    }

    .deployment-icon {
        width: 56px;
        height: 56px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        margin: 0;
    }

    .deployment-icon img {
        width: 40px;
        height: 40px;
    }

    .deployment-title {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        text-align: left;
        margin: 0;
        align-self: end;
    }

    .deployment-description {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        text-align: left;
        margin: 0;
        align-self: start;
    }

    /* 聯絡區塊樣式由共用 CSS 提供 */
}

/* ============================================
   響應式設計 - 600px（手機版）
   ============================================ */
@media (max-width: 600px) {
    :root {
        --scale: 0.55;
        --nav-height: 56px;
    }

    .hero {
        min-height: 380px;
    }

    .hero-content {
        padding-top: 80px;
    }

    .hero-title {
    }

    .hero-description {
    }

    .section-title,
    .section-title-white {
    }

    .section-subtitle {
    }

    /* 聯絡區塊樣式由共用 CSS 提供 */

    /* 隱藏光暈效果 */
    .blur-effect,
    .card-glow {
        display: none;
    }
}

/* ============================================
   響應式設計 - 414px（小尺寸手機）
   ============================================ */
@media (max-width: 414px) {

    /* 服務卡片容器 - 減少 padding 避免溢出 */
    .services-grid {
        padding: 0 12px;
        gap: 16px;
    }

    .security-content {
        padding: 0 12px;
    }

    /* 服務卡片 - 保持比例並等比縮放 */
    .service-card {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        margin: 0 auto;
    }

    /* SVG 背景 - 正確填滿並保持比例 */
    .service-card .card-bg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

    /* 卡片內容 - 使用比例定位 */
    .card-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: calc(16px + 1vw);
        padding: calc(20px + 2vw) calc(16px + 1vw);
        box-sizing: border-box;
        z-index: 1;
    }

    /* 圖示圖片 - 縮小尺寸 */
    .card-icon {
        width: clamp(40px, 12vw, 56px);
        height: clamp(40px, 12vw, 56px);
        flex-shrink: 0;
    }

    .card-icon img {
        width: clamp(28px, 9vw, 40px);
        height: clamp(28px, 9vw, 40px);
    }

    /* 卡片標題 - 響應式字級 */
    .card-title {
        line-height: 1.3;
    }

    /* 調整字體行高 */
    .card-description {
        line-height: 1.5;
    }

    /* 隱藏光暈效果 */
    .card-glow {
        display: none;
    }

    /* 區塊標題調整 */
    .section-title,
    .section-title-white {
    }

    .section-subtitle {
        padding: 0 8px;
    }
}

/* ============================================
   響應式設計 - 375px（小尺寸手機）
   ============================================ */
@media (max-width: 375px) {
    :root {
        --scale: 0.5;
        --container-padding: 16px;
        --nav-padding: 16px;
    }

    .hero-title {
    }

    .hero-description {
    }

    .security-title {
    }

    .deployment-title {
    }
}

/* ============================================
   動畫定義
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 滾動時顯示的動畫 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   輔助類別
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 高對比度模式 */
@media (prefers-contrast: high) {
    .section-badge {
        border-width: 2px;
    }

    .card-icon,
    .security-icon,
    .deployment-icon {
        border-width: 3px;
    }
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    html {
        scroll-behavior: auto;
    }
}