/* =========================================================
   凱勝清運 — Fresh Trust × High-Convert
   設計語言：清新信賴感（白底圓角柔陰影）× 鮮明高轉換（橘/綠強對比 CTA）
   信任軸：紙白 #FBFDFC × 品牌綠 #12B886 × 天藍 #38BDF8
   轉換軸：活力橘 #FF7A00（主行動）× LINE 綠 #06C755
   字型：Noto Sans TC（主）/ Noto Serif TC（信任標題）/ IBM Plex Mono（數字標籤）
   ========================================================= */
:root {
    /* 顏色沿用原配色：主藍 × 薄荷綠（變數名沿用新版型，值改回原色） */
    --paper: #eaf0f9; /* 冷調紙白底 */
    --paper-2: #f6f9fe; /* 更亮的紙 */
    --surface: #ffffff; /* 卡片面 */
    --ink: #0a1524; /* 近黑墨 */
    --ink-soft: #52647e; /* 次文字 */
    --green: #1556d6; /* 主色 藍（沿用 --green 變數名） */
    --green-deep: #0a2e73; /* 深藍 暗區 */
    --green-soft: #dbe6fb; /* 極淡藍底 */
    --sky: #15c9a3; /* 點綴 薄荷綠 */
    --orange: #1556d6; /* 強調＝主藍（不另用橘） */
    --orange-deep: #0a2e73;
    --line-rgb: 21, 86, 214;
    --line: #c7d6ec; /* 髮絲線 */
    --serif: "Noto Serif TC", serif;
    --sans: "Noto Sans TC", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --maxw: 1240px;
    --gut: clamp(20px, 5vw, 72px);
    --r: 16px; /* 圓角基準 */
    --r-sm: 10px;
    --shadow: 0 10px 30px -12px rgba(15, 38, 32, 0.18);
    --shadow-lg: 0 24px 60px -18px rgba(15, 38, 32, 0.28);
    --ring: 0 0 0 1px var(--line);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
img {
    max-width: 100%;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}
::selection {
    background: var(--green);
    color: #fff;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gut);
}
.sec {
    padding: clamp(54px, 6vw, 96px) 0;
    position: relative;
}

/* ---------- 共用：mono 標籤 / 區塊標題 ---------- */
.kicker {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-soft);
    padding: 6px 14px;
    border-radius: 999px;
}

.shead {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(40px, 5vw, 60px);
}
.shead .kik {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green-deep);
    background: var(--green-soft);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.shead h2 {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(28px, 5.5vw, 50px);
    line-height: 1.25;
    letter-spacing: 0.04em;
}
.shead .meta {
    display: block;
    margin-top: 14px;
    font-size: 16px;
    color: var(--ink-soft);
    letter-spacing: 0.09em;
}

/* 螢光劃記（綠） */
.mark {
    background: linear-gradient(transparent 88%, rgba(18, 184, 134, 0.45) 0);
    padding: 0 0.06em;
}
/* 圓角徽章 pill */
.sticker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 13px;
    background: var(--surface);
    color: var(--green-deep);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    transform: none !important; /* 取消舊版旋轉 */
}

/* ---------- 按鈕 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
    padding: 15px 28px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition:
        transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.18s,
        filter 0.18s;
}
/* LINE 主按鈕（轉換色） */
.btn-line {
    background: #06c755;
    color: #fff;
    box-shadow: 0 12px 24px -8px rgba(6, 199, 85, 0.55);
}
.btn-line:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -8px rgba(6, 199, 85, 0.6);
}
/* 橘色強轉換按鈕 */
.btn-orange {
    background: linear-gradient(180deg, var(--orange), var(--orange-deep));
    color: #fff;
    box-shadow: 0 12px 24px -8px rgba(21, 86, 214, 0.5);
}
.btn-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -8px rgba(21, 86, 214, 0.55);
}
.btn-blue {
    background: var(--green);
    color: #fff;
    box-shadow: 0 12px 24px -8px rgba(18, 184, 134, 0.5);
}
.btn-blue:hover {
    transform: translateY(-3px);
}
.btn-out {
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--line);
}
.btn-out:hover {
    border-color: var(--green);
    color: var(--green-deep);
    transform: translateY(-3px);
}

/* ---------- 頂部列 ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}
.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.01em;
}
.topbar .brand .logo {
    flex: none;
    height: 40px;
    width: auto;
}
.topbar nav {
    display: flex;
    align-items: center;
    gap: 22px;
}
.topbar nav a.lk {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color 0.15s;
}
.topbar nav a.lk:hover {
    color: var(--green-deep);
}
.topbar .tel {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
}
.topbar .btn {
    padding: 10px 18px;
    font-size: 15px;
}

/* ---------- Hero（滿版背景圖） ---------- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 88vh, 860px);
    padding: clamp(96px, 14vh, 160px) 0 clamp(56px, 8vw, 96px);
    color: #fff;
}
/* 滿版圖層 + 暗化漸層，確保文字可讀 */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
/* 圖片本體：緩慢 Ken-Burns 放大／位移 */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: -4%; /* 預留縮放餘量，避免邊緣露白 */
    background-image: url("../images/hero.webp");
    background-size: cover;
    background-position: center;
    transform-origin: 65% 40%;
    animation: kenburns 22s ease-in-out infinite alternate;
    will-change: transform;
}
/* 暗化漸層覆蓋層（不跟著動） */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(105deg, rgba(10, 21, 36, 0.86) 0%, rgba(10, 21, 36, 0.62) 42%, rgba(10, 21, 36, 0.2) 100%),
        linear-gradient(to top, rgba(10, 21, 36, 0.7), rgba(10, 21, 36, 0) 45%);
}
@keyframes kenburns {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.12) translate3d(-1.5%, -1.5%, 0);
    }
}
.hero .wrap {
    position: relative;
    z-index: 1;
    width: 100%;
}
.hero-content {
    max-width: 720px;
}
.hero .eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}
.hero .kicker {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    backdrop-filter: blur(4px);
}
.hero .eyebrow .sticker {
    background: var(--orange);
    color: #fff;
    border: none;
    box-shadow: 0 10px 20px -8px rgba(21, 86, 214, 0.5);
}
.hero h1 {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(42px, 8.5vw, 100px);
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero h1 em {
    font-style: normal;
    color: #fff;
}
.hero h1 .mark {
    background: linear-gradient(transparent 86%, rgba(21, 201, 163, 0.85) 0);
}
.hero h1 .nb {
    white-space: nowrap;
}
.hero .sub {
    margin-top: 22px;
    max-width: 48ch;
    font-size: clamp(15px, 1.6vw, 18px);
    color: rgba(255, 255, 255, 0.88);
}
.hero .ctas {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.hero .badges {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero .badges .sticker {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
    backdrop-filter: blur(4px);
}

/* Hero 數據信任條 */
.trust-strip {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 44px);
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.trust-strip .ts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trust-strip .ts b {
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(24px, 3.4vw, 34px);
    color: #fff;
    line-height: 1;
}
.trust-strip .ts span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- 跑馬燈 ---------- */
.marquee {
    background: var(--green);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}
.marquee .track {
    display: inline-flex;
    gap: 0;
    animation: scroll 28s linear infinite;
    will-change: transform;
}
.marquee span {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 13px 0;
    display: inline-flex;
    align-items: center;
}
.marquee span::after {
    content: "•";
    opacity: 0.55;
    margin: 0 22px;
}
@keyframes scroll {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 痛點 ---------- */
#pain {
    background: var(--paper-2);
}
.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
}
.pain-grid .cell {
    background: var(--surface);
    padding: 28px 26px;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    min-height: 168px;
    border: 1px solid var(--line);
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}
.pain-grid .cell:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.pain-grid .cell .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--green-deep);
    /* 漸層描邊圈：白底 + 藍→薄荷外環 */
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--green), var(--sky)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 4px 10px -6px rgba(var(--line-rgb), 0.55);
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}
.pain-grid .cell:hover .n {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(var(--line-rgb), 0.6);
}
.pain-grid .cell .ic {
    display: inline-flex;
    width: 72px;
    height: 72px;
    background-color: #eaf0f9;
    border-radius: 15px;
    padding: 9px;
    transition: transform 0.18s;
}
.pain-grid .cell .ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pain-grid .cell:hover .ic {
    transform: translateY(-2px) scale(1.06);
}
.pain-grid .cell h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
}

/* ---------- 服務 ---------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
}
.svc {
    background: var(--surface);
    padding: 30px 24px;
    position: relative;
    border-radius: var(--r);
    border: 1px solid var(--line);
    text-align: center;
    box-shadow: var(--shadow);
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        border-color 0.18s;
}
.svc:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green);
}
.svc .ic {
    font-size: 36px;
    margin-bottom: 14px;
    width: 64px;
    height: 64px;
    padding: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-soft);
    border-radius: 14px;
}
.svc .ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.svc:hover .ic img {
    transform: translateY(-2px) scale(1.06);
    transition: transform 0.18s;
}
.svc h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 12px;
}
.svc ul {
    list-style: none;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.svc li {
    padding: 8px 22px 8px 22px;
    border-top: 1px solid var(--line);
    position: relative;
}
.svc li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

/* ---------- 服務範圍 SEO（併入服務區） ---------- */
#service .lead {
    font-size: clamp(16px, 2vw, 19px);
    max-width: 64ch;
    margin: 0 auto;
    text-align: center;
    line-height: 2;
    color: var(--ink-soft);
}
#service .tags {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
#service .tags a {
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 18px;
    background: var(--surface);
    color: var(--ink-soft);
    transition: 0.15s;
}
#service .tags a:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- 保證 ---------- */
#promise {
    background-color: var(--green-deep);
    color: #fff;
    /* 真實作業照 + 品牌藍漸層覆蓋層（確保白字可讀、維持藍×薄荷配色） */
    background-image:
        radial-gradient(700px 400px at 90% 0%, rgba(21, 201, 163, 0.28), transparent 60%),
        linear-gradient(150deg, rgba(10, 46, 115, 0.94) 0%, rgba(10, 21, 36, 0.82) 55%, rgba(21, 86, 214, 0.72) 100%),
        url("../images/sec-bg.webp");
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}
#promise .shead .kik {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}
#promise .shead h2 {
    color: #fff;
}
#promise .shead .meta {
    color: rgba(255, 255, 255, 0.78);
}
.pro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
}
.pro {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r);
    padding: 28px 24px;
    position: relative;
    backdrop-filter: blur(4px);
    transition: transform 0.18s;
}
.pro:hover {
    transform: translateY(-4px);
}
.pro .big {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--sky);
    margin-bottom: 14px;
}
.pro h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 8px;
}
.pro p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.82);
}

/* ---------- 流程（置中時間軸） ---------- */
.flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 40px);
    counter-reset: step;
    padding-top: 8px;
}
.flow::before {
    content: "";
    position: absolute;
    top: 43px;
    left: 12%;
    right: 12%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--green) 0 10px, transparent 10px 20px);
    opacity: 0.5;
    z-index: 0;
}
.step {
    position: relative;
    z-index: 1;
    text-align: center;
}
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    background: var(--surface);
    border-radius: 50%;
    color: var(--green-deep);
    font-family: var(--mono);
    font-weight: 600;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    border: 2px solid var(--green-soft);
}
.step h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
}
.step p {
    font-size: 14px;
    color: var(--ink-soft);
}

/* ---------- 價格 ---------- */
#price {
    background: var(--paper-2);
    display: none;
}
.ptable {
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
    overflow: hidden;
    border: 1px solid var(--line);
    max-width: 860px;
    margin: 0 auto;
}
.prow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px clamp(22px, 3vw, 36px);
    border-top: 1px solid var(--line);
    transition: background 0.15s;
}
.prow:not(:first-child):hover {
    background: var(--green-soft);
}
.prow:first-child {
    border-top: none;
    background: var(--green-deep);
    color: #fff;
}
.prow .item {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 23px);
}
.prow:first-child .item,
.prow:first-child .price {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.prow .price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(18px, 2.6vw, 26px);
    color: var(--orange-deep);
}
.prow .price small {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
}
.note {
    margin: 16px auto 0;
    max-width: 860px;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}

/* ---------- 案例 ---------- */
#cases {
    background-color: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    /* 多層光暈 + 細點網格，讓深色背景更有層次 */
    background-image:
        radial-gradient(680px 430px at 88% -8%, rgba(21, 201, 163, 0.22), transparent 60%),
        radial-gradient(640px 500px at 4% 112%, rgba(21, 86, 214, 0.32), transparent 62%),
        radial-gradient(1000px 640px at 50% 130%, rgba(10, 46, 115, 0.55), transparent 72%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
    background-size:
        auto,
        auto,
        auto,
        22px 22px;
    background-position: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
/* 呼應 logo 的循環環，淡淡浮在右下角增添層次 */
#cases::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: -120px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cdefs%3E%3ClinearGradient%20id='c'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%2315c9a3'/%3E%3Cstop%20offset='1'%20stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='url(%23c)'%20stroke-width='7'%20stroke-linecap='round'%3E%3Cpath%20d='M48%2070%20A60%2060%200%200%201%20152%2070'/%3E%3Cpath%20d='M152%20130%20A60%2060%200%200%201%2048%20130'/%3E%3C/g%3E%3Cg%20fill='url(%23c)'%3E%3Cpath%20d='M152%2086%20L144%2070%20L160%2070%20Z'/%3E%3Cpath%20d='M48%20114%20L40%20130%20L56%20130%20Z'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat center / contain;
    opacity: 0.08;
    animation: ks-loop-spin 80s linear infinite;
}
#cases > .wrap {
    position: relative;
    z-index: 1;
}
#cases .shead .kik {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
#cases .shead h2 {
    color: var(--paper);
}
#cases .shead .meta {
    color: rgba(255, 255, 255, 0.72);
}
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 26px);
}
.shot {
    border-radius: var(--r);
    background: #0e2350;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shot:hover img {
    transform: scale(1.06);
}
.shot figcaption {
    padding: 15px 18px;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shot figcaption .t {
    color: var(--paper-2);
    font-weight: 600;
}

/* ---------- 評價（編輯卡片） ---------- */
.rev-swiper {
    padding-bottom: 52px;
}
.rev-swiper .swiper-wrapper {
    align-items: stretch;
}
.rev-swiper .swiper-slide {
    height: auto;
}
.rev {
    position: relative;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}
.rev:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.rev::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    right: 20px;
    font-family: var(--serif);
    font-weight: 900;
    font-size: 88px;
    line-height: 1;
    color: var(--green);
    opacity: 0.16;
    pointer-events: none;
}
.rev .stars {
    color: var(--green);
    letter-spacing: 3px;
    font-size: 16px;
    margin-bottom: 14px;
}
.rev p {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.75;
    margin-bottom: 18px;
    flex: 1;
}
.rev .who {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.rev-swiper .swiper-pagination {
    bottom: 8px;
}
.rev-swiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--green);
    opacity: 0.25;
    transition:
        opacity 0.2s,
        width 0.2s;
}
.rev-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 5px;
}

/* ---------- FAQ（卡片式手風琴） ---------- */
#faq .faqs {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#faq details {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
    overflow: hidden;
}
#faq details[open] {
    border-color: var(--green);
}
#faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(17px, 2vw, 21px);
}
#faq summary::-webkit-details-marker {
    display: none;
}
#faq summary .q {
    flex: none;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--green-deep);
    background: var(--green-soft);
    border-radius: 8px;
    padding: 4px 10px;
}
#faq summary .pl {
    margin-left: auto;
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--green-soft);
    font-family: var(--mono);
    font-size: 20px;
    color: var(--green-deep);
    transition:
        transform 0.25s,
        background 0.2s,
        color 0.2s;
}
#faq details[open] summary .pl {
    transform: rotate(45deg);
    background: var(--green);
    color: #fff;
}
#faq .a {
    padding: 0 24px 22px 24px;
    color: var(--ink-soft);
    max-width: 64ch;
}

/* ---------- 最後 CTA ---------- */
#final {
    background-color: var(--green);
    color: #fff;
    background-image:
        radial-gradient(700px 420px at 85% 0%, rgba(21, 201, 163, 0.36), transparent 60%),
        linear-gradient(135deg, rgba(21, 86, 214, 0.92) 0%, rgba(10, 46, 115, 0.88) 100%),
        url("../images/sec-bg-4.webp");
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}
#final .inner {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
#final h2 {
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(32px, 6vw, 64px);
    line-height: 1.15;
    letter-spacing: 0.01em;
}
#final h2 em {
    font-style: normal;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(21, 201, 163, 0.85);
    text-underline-offset: 8px;
}
#final p {
    margin: 18px 0 28px;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}
#final .ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
#final .btn-line {
    background: #fff;
    color: #06c755;
}
#final .btn-out {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}
#final .btn-out:hover {
    background: #fff;
    color: var(--green-deep);
}
.qr {
    background: #fff;
    color: var(--ink);
    border-radius: var(--r);
    padding: 20px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.qr img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 12px;
    border-radius: var(--r-sm);
}
.qr span {
    font-size: 13px;
    font-weight: 600;
    display: block;
    color: var(--ink-soft);
}

/* ---------- 頁尾 ---------- */
footer {
    background: var(--ink);
    color: var(--paper);
    padding: 56px 0 40px;
}
footer .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 28px;
    align-items: center;
}
footer .fb {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 28px;
}
footer .fb .logo {
    flex: none;
    height: 44px;
    width: auto;
}
footer .meta {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    color: rgba(255, 255, 255, 0.78);
}
footer .meta a {
    color: var(--green);
}
footer .legal {
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
}

/* ---------- 浮動 CTA dock ---------- */
.dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    box-shadow: 0 -8px 24px -10px rgba(15, 38, 32, 0.3);
}
.dock a {
    flex: 1;
    text-align: center;
    padding: 16px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dock .d-line {
    background: #06c755;
}
.dock .d-tel {
    background: var(--orange);
}
.fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(180%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fab.show {
    transform: none;
}
.fab a {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
}
.fab .f-line {
    background: #06c755;
    box-shadow: 0 12px 24px -8px rgba(6, 199, 85, 0.6);
    animation: bob 2.4s ease-in-out infinite;
}
.fab .f-tel {
    background: var(--orange);
    box-shadow: 0 12px 24px -8px rgba(21, 86, 214, 0.55);
}
@keyframes bob {
    50% {
        transform: translateY(-6px);
    }
}

/* 進場動畫改用 AOS（見 head 的 aos.css / aos.js 與 main.js 的 AOS.init） */

/* =========================================================
   區塊背景（白×米交錯 + 極淡格線紋理，無光暈）
   ========================================================= */
/* 內容層浮於背景層之上 */
.sec > .wrap {
    position: relative;
    z-index: 1;
}
/* 淺色區塊：交錯底色製造段落節奏 */
#pain,
#service,
#flow,
#price,
#reviews,
#faq {
    position: relative;
    overflow: hidden;
}
#pain,
#flow,
#reviews {
    background-color: var(--paper-2);
}
#service,
#price,
#faq {
    background-color: var(--surface);
}
/* 共用紋理層 */
#pain::before,
#service::before,
#flow::before,
#price::before,
#reviews::before,
#faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* 白色區塊：極淡格線（藍 3%） */
#service::before,
#price::before,
#faq::before {
    background-image:
        linear-gradient(rgba(var(--line-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--line-rgb), 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
}
/* 米色區塊共用：紋理尺寸 */
#pain::before,
#flow::before,
#reviews::before {
    background-size: 160px 160px;
}
/* 痛點：呼應 logo 的循環雙箭頭環（藍→薄荷漸層，淡淡旋轉） */
#pain::before {
    inset: auto -150px -190px auto;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%231556d6'/%3E%3Cstop%20offset='1'%20stop-color='%2315c9a3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='url(%23g)'%20stroke-width='8'%20stroke-linecap='round'%3E%3Cpath%20d='M48%2070%20A60%2060%200%200%201%20152%2070'/%3E%3Cpath%20d='M152%20130%20A60%2060%200%200%201%2048%20130'/%3E%3C/g%3E%3Cg%20fill='url(%23g)'%3E%3Cpath%20d='M152%2086%20L144%2070%20L160%2070%20Z'/%3E%3Cpath%20d='M48%20114%20L40%20130%20L56%20130%20Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.07;
    animation: ks-loop-spin 70s linear infinite;
}
/* 第二顆較小的環，反向慢轉，左上角露出一角 */
#pain::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: -110px auto auto -110px;
    width: 420px;
    height: 420px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cdefs%3E%3ClinearGradient%20id='g2'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%2315c9a3'/%3E%3Cstop%20offset='1'%20stop-color='%231556d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='url(%23g2)'%20stroke-width='8'%20stroke-linecap='round'%3E%3Cpath%20d='M48%2070%20A60%2060%200%200%201%20152%2070'/%3E%3Cpath%20d='M152%20130%20A60%2060%200%200%201%2048%20130'/%3E%3C/g%3E%3Cg%20fill='url(%23g2)'%3E%3Cpath%20d='M152%2086%20L144%2070%20L160%2070%20Z'/%3E%3Cpath%20d='M48%20114%20L40%20130%20L56%20130%20Z'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat center / contain;
    opacity: 0.06;
    animation: ks-loop-spin 95s linear infinite reverse;
}
@keyframes ks-loop-spin {
    to {
        transform: rotate(360deg);
    }
}
/* 流程：紙質背景（細微纖維顆粒 + 上下柔光，冷調紙白） */
#flow::before {
    background-color: var(--paper-2);
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(100% 70% at 50% 115%, rgba(var(--line-rgb), 0.05), transparent 60%),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23p)'/%3E%3C/svg%3E");
    background-size:
        100% 100%,
        100% 100%,
        180px 180px;
    background-position:
        50% 0,
        50% 0,
        0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    opacity: 0.9;
    mix-blend-mode: multiply;
}

/* 流程：斜向柔光緩緩掃過紙面 */
#flow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 32%,
        rgba(255, 255, 255, 0.55) 47%,
        rgba(21, 201, 163, 0.07) 52%,
        transparent 68%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: soft-light;
    animation: flow-sheen 11s ease-in-out infinite;
}
@keyframes flow-sheen {
    0% {
        background-position: 130% 0;
    }
    60%,
    100% {
        background-position: -45% 0;
    }
}
/* 流程：上升雪佛龍箭頭穿出同心圓環 + 柔光暈（藍→薄荷，右側出血） */
.flow-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 460px;
    transform: translate(-50%, -50%);
    opacity: 50%;
    background:
        radial-gradient(closest-side, rgba(21, 201, 163, 0.12), rgba(21, 86, 214, 0.05) 55%, transparent 72%) center /
            430px 430px no-repeat,
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='460'%20viewBox='0%200%20360%20460'%3E%3Cdefs%3E%3ClinearGradient%20id='a'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%231556d6'/%3E%3Cstop%20offset='1'%20stop-color='%2315c9a3'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='r'%20x1='0'%20y1='1'%20x2='0'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%231556d6'/%3E%3Cstop%20offset='1'%20stop-color='%2315c9a3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='180'%20cy='270'%20r='130'%20stroke='url(%23a)'%20stroke-width='5'%20stroke-opacity='0.16'/%3E%3Ccircle%20cx='180'%20cy='270'%20r='170'%20stroke='url(%23a)'%20stroke-width='4'%20stroke-opacity='0.13'%20stroke-dasharray='1%2013'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='url(%23r)'%20stroke-width='14'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M135%20335%20L180%20305%20L225%20335'%20stroke-opacity='0.28'/%3E%3Cpath%20d='M135%20285%20L180%20255%20L225%20285'%20stroke-opacity='0.42'/%3E%3Cpath%20d='M135%20235%20L180%20205%20L225%20235'%20stroke-opacity='0.58'/%3E%3C/g%3E%3C/svg%3E")
            center / contain no-repeat;
    animation: flow-deco-float 9s ease-in-out infinite;
}
@keyframes flow-deco-float {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 12px));
    }
}
@media (max-width: 720px) {
    .flow-deco {
        opacity: 0.55;
        width: 240px;
        height: 320px;
    }
}
/* 評價：星星好評（藍 5%） */
#reviews::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%231556d6'%20stroke-opacity='0.05'%20stroke-width='2'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M52%2036%20L55.8%2046.8%20L67.2%2047%20L58.1%2054%20L61.4%2064.9%20L52%2058.4%20L42.6%2064.9%20L45.9%2054%20L36.8%2047%20L48.2%2046.8%20Z'/%3E%3Cpath%20d='M118%20102%20L120.4%20108.8%20L127.5%20108.9%20L121.8%20113.2%20L123.9%20120.1%20L118%20116%20L112.1%20120.1%20L114.2%20113.2%20L108.5%20108.9%20L115.7%20108.8%20Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 標題裝飾：藍→薄荷漸層短線 */
.shead h2 {
    position: relative;
}
.shead h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--green),
        var(--sky) 42%,
        rgba(255, 255, 255, 1) 50%,
        var(--sky) 58%,
        var(--green)
    );
    background-size: 220% 100%;
    animation: shead-sweep 2.8s ease-in-out infinite;
}
@keyframes shead-sweep {
    0% {
        background-position: 140% 0;
    }
    60%,
    100% {
        background-position: -40% 0;
    }
}

/* ---------- RWD ---------- */
@media (max-width: 960px) {
    .hero {
        min-height: 0;
        padding: clamp(84px, 16vh, 120px) 0 clamp(44px, 8vw, 64px);
    }
    .hero-bg::after {
        background-image: linear-gradient(
            180deg,
            rgba(10, 21, 36, 0.82) 0%,
            rgba(10, 21, 36, 0.6) 55%,
            rgba(10, 21, 36, 0.78) 100%
        );
    }
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pro-grid,
    .flow {
        grid-template-columns: repeat(2, 1fr);
    }
    .flow::before {
        display: none;
    }
    #final .inner {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .topbar nav .lk,
    .topbar .tel {
        display: none;
    }
    .pain-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }
    .svc-grid {
        grid-template-columns: 1fr;
    }
    .pro-grid,
    .flow {
        grid-template-columns: 1fr;
    }
    .step {
        padding-bottom: 24px;
    }
    .fab {
        display: none;
    }
    .dock {
        display: flex;
    }
    body {
        padding-bottom: 54px;
    }
}

/* ---------- 無障礙：尊重減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
    .fab {
        transform: none;
    }
}