/* 解決方案首屏獨立作用域；卡牆、標題與下一區塊沿用正常文件捲動。 */
.solutions_bento {
    --bento_paper: #f4fafc;
    --bento_ink: #0f4c5c;
    --bento_teal: #00a8a8;
    --bento_mint: #2dd4bf;
    --bento_gap: clamp(12px, 1.15vw, 22px);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 3.3vw;
    min-height: 760px;
    height: 100svh;
    max-height: 1250px;
    padding: 0 3.5vw 0 var(--digital_gutter);
    overflow: clip;
    isolation: isolate;
    color: var(--bento_ink);
    background: var(--bento_paper);
}
/* 首屏背景接到既有紙色，僅處理 Banner 自身末端。 */
.solutions_bento::after { content: ''; position: absolute; z-index: -1; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, #f9fbfa); pointer-events: none; }
@media (max-width: 1199px) {
    .solutions_bento { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3vw; padding-right: 24px; min-height: 700px; }
}
@media (max-width: 900px) {
    .solutions_bento { min-height: 700px; max-height: 1050px; }
}
@media (max-width: 700px) {
    .solutions_bento { display: block; height: auto; min-height: 0; max-height: none; padding: 112px 22px 24px; }
}

/* 左側大字以分行遮罩揭露；外層專供滾動退場，不參與循環移動。 */
.solutions_bento_copy { position: relative; z-index: 3; align-self: center; min-width: 0; padding: 115px 0 60px; }
.solutions_bento_meta { display: flex; gap: 22px; align-items: center; font-size: 9px; line-height: 1.6; letter-spacing: .17em; margin: 0 0 39px; color: #527d87; }
.solutions_bento_meta span:first-child { color: var(--bento_ink); }
.solutions_bento_meta span:last-child::before { content: ''; display: inline-block; width: 24px; height: 1px; margin-right: 14px; background: #9fbfc5; vertical-align: middle; }
.solutions_bento h1 { font: 600 clamp(65px, 6.1vw, 122px)/.98 'DM Sans', 'Manrope', sans-serif; letter-spacing: -.073em; margin: 0 0 32px; }
.solutions_title_line { display: block; overflow: hidden; padding: .07em .02em .12em 0; margin-bottom: -.09em; }
.solutions_title_line > span { display: block; transform-origin: 0 100%; }
.solutions_title_small { font-size: .84em; letter-spacing: -.065em; margin-top: .13em; }
.solutions_title_last { font-size: 1.38em; font-weight: 500; letter-spacing: -.078em; }
.solutions_title_dot { color: var(--bento_teal); }
.solutions_bento_lead { font-size: clamp(18px, 1.45vw, 27px); line-height: 1.7; letter-spacing: .045em; margin: 0 0 20px; }
.solutions_bento_description { max-width: 385px; font-size: clamp(12px, .83vw, 16px); line-height: 2.15; letter-spacing: .015em; color: #54727c; margin: 0; }
.solutions_bento_footnote { margin: 42px 0 0; font-size: 8px; letter-spacing: .15em; color: #557a84; display: flex; align-items: center; gap: 18px; }
.solutions_bento_footnote > span { font-size: 19px; font-weight: 300; color: var(--bento_teal); }
@media (min-width: 1500px) { .solutions_bento_description { max-width: 440px; } }
@media (max-width: 1199px) {
    .solutions_bento h1 { font-size: 6.1vw; }
    .solutions_bento_meta { margin-bottom: 30px; font-size: 8px; gap: 12px; }
    .solutions_bento_meta span:last-child::before { display: none; }
    .solutions_bento_lead { font-size: 18px; }
    .solutions_bento_description { max-width: 330px; }
}
@media (max-width: 900px) {
    .solutions_bento h1 { font-size: 6.3vw; }
    .solutions_bento_meta span:last-child { display: none; }
    .solutions_bento_lead { font-size: 16px; }
    .solutions_bento_footnote { font-size: 7px; letter-spacing: .08em; }
}
@media (max-width: 700px) {
    .solutions_bento_copy { padding: 0 0 32px; }
    .solutions_bento_meta { margin-bottom: 23px; font-size: 8px; }
    .solutions_bento_meta span:last-child { display: inline; }
    .solutions_bento h1 { font-size: clamp(44px, 12.8vw, 82px); margin-bottom: 22px; }
    .solutions_title_small { font-size: .8em; }
    .solutions_title_last { font-size: 1.24em; }
    .solutions_bento_lead { font-size: 18px; margin-bottom: 12px; }
    .solutions_bento_description { max-width: 440px; font-size: 12px; line-height: 2; }
    .solutions_bento_footnote { display: none; }
}

/* 穩定的探索入口與可鍵盤操作的動態暫停按鈕。 */
.solutions_bento_actions { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 30px; }
.solutions_bento_explore { display: inline-flex; align-items: center; gap: 26px; min-height: 64px; padding: 12px 15px 12px 23px; border: 1px solid var(--bento_ink); border-radius: 6px; font-size: 12px; background: var(--bento_ink); color: var(--bento_paper) !important; transition: background .25s, transform .25s; }
.solutions_bento_explore small { display: block; margin-top: 2px; font-size: 7px; letter-spacing: .13em; color: #c7e9eb; }
.solutions_bento_explore i { display: grid; place-items: center; border: 1px solid #baded666; border-radius: 50%; width: 34px; height: 34px; font-size: 21px; font-style: normal; font-weight: 300; }
.solutions_bento_explore:hover { background: #166071; transform: translateY(-2px); }
.solutions_bento_pause { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 8px 3px; font-size: 10px !important; color: #496f79 !important; }
.solutions_bento_pause[hidden] { display: none; }
.solutions_pause_symbol { font: 500 11px/1 sans-serif; }
@media (max-width: 1199px) { .solutions_bento_actions { gap: 12px; } .solutions_bento_explore { padding-inline: 15px; gap: 14px; } }
@media (max-width: 700px) { .solutions_bento_actions { margin-top: 22px; } .solutions_bento_explore { min-height: 53px; gap: 25px; } .solutions_bento_explore small { display: none; } .solutions_bento_pause { margin-left: auto; } }

/* 三個獨立循環軌道；入口、循環、滾動與 Hover 各用不同圖層。 */
.solutions_bento_wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bento_gap); height: 100%; min-width: 0; min-height: 0; overflow: clip; perspective: 1200px; }
.solutions_bento_column { position: relative; min-width: 0; height: 100%; transform-origin: 50% 45%; }
.solutions_bento_column_reveal, .solutions_bento_track { position: relative; width: 100%; }
.solutions_bento_group { position: relative; display: flex; flex-direction: column; gap: var(--bento_gap); padding-bottom: var(--bento_gap); }
.solutions_bento[data-bento-mode='animated'] .solutions_bento_track { will-change: transform; }
@media (max-width: 1199px) {
    .solutions_bento_wall { gap: 12px; --bento_gap: 12px; }
}
@media (max-width: 900px) {
    .solutions_bento_wall { gap: 9px; --bento_gap: 9px; }
}
@media (max-width: 700px) {
    .solutions_bento_wall { height: 475px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; --bento_gap: 12px; border-radius: 14px; }
    .solutions_bento_column:nth-child(3) { display: none; }
}

/* 大小交錯的服務圖像；服務名稱始終保留，補充說明在 Hover／Focus 展開。 */
.solutions_bento_card { position: relative; display: block; flex: 0 0 auto; min-width: 0; border-radius: clamp(15px, 1.8vw, 30px); outline-offset: -4px !important; }
.solutions_card_tall { height: clamp(340px, 29vw, 535px); }
.solutions_card_medium { height: clamp(285px, 22vw, 415px); }
.solutions_card_short { height: clamp(240px, 18vw, 335px); }
.solutions_card_surface { position: relative; height: 100%; overflow: hidden; border-radius: inherit; isolation: isolate; background: var(--bento_ink); color: #f4fafc; transition: transform .5s cubic-bezier(.22,.7,.25,1), box-shadow .5s; }
.solutions_card_eyebrow { position: absolute; z-index: 2; top: 23px; left: 21px; right: 21px; font-size: clamp(6px, .52vw, 9px); font-weight: 500; line-height: 1.7; letter-spacing: .14em; opacity: .85; }
.solutions_card_caption { position: absolute; z-index: 3; left: 21px; right: 21px; bottom: 23px; display: grid; grid-template-columns: minmax(0, 1fr) 25px; gap: 0 4px; }
.solutions_card_caption h2 { font-size: clamp(16px, 1.25vw, 25px); letter-spacing: .01em; line-height: 1.5; margin: 0; font-weight: 500; align-self: center; }
.solutions_card_arrow { width: 25px; height: 25px; align-self: center; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 17px; opacity: .75; }
.solutions_card_caption p { grid-column: 1 / -1; max-height: 0; opacity: 0; margin: 0; padding: 0; font-size: 11px; line-height: 1.85; overflow: hidden; transition: max-height .4s, opacity .4s, margin .4s; }
.solutions_bento_card:is(:hover, :focus-visible) { z-index: 5; }
.solutions_bento_card:is(:hover, :focus-visible) .solutions_card_surface { transform: scale(1.025); box-shadow: 0 15px 35px #0f4c5c1f; }
.solutions_bento_card:is(:hover, :focus-visible) .solutions_card_caption p { max-height: 100px; opacity: .95; margin-top: 12px; }
@media (max-width: 1199px) {
    .solutions_card_tall { height: 355px; }
    .solutions_card_medium { height: 285px; }
    .solutions_card_short { height: 240px; }
    .solutions_card_caption, .solutions_card_eyebrow { left: 14px; right: 14px; }
    .solutions_card_caption { bottom: 18px; grid-template-columns: minmax(0, 1fr) 20px; }
    .solutions_card_caption h2 { font-size: 15px; }
    .solutions_card_arrow { width: 20px; height: 20px; font-size: 14px; }
    .solutions_card_caption p { font-size: 10px; }
}
@media (max-width: 900px) and (min-width: 701px) {
    .solutions_card_caption { display: block; }
    .solutions_card_caption h2 { font-size: 13px; }
    .solutions_card_arrow { display: none; }
    .solutions_card_eyebrow { font-size: 6px; letter-spacing: .06em; }
}
@media (max-width: 700px) {
    .solutions_card_tall { height: 295px; }
    .solutions_card_medium { height: 250px; }
    .solutions_card_short { height: 225px; }
    .solutions_card_eyebrow { font-size: 6px; top: 16px; }
    .solutions_card_caption h2 { font-size: 16px; }
    .solutions_card_caption p { max-height: 74px; opacity: .85; margin-top: 9px; font-size: 10px; }
}
@media (hover: none) { .solutions_bento_card:hover .solutions_card_surface { transform: none; } }

/* 圖片只作獨立內容素材；標題、服務簡介及所有互動都是真實 HTML。 */
img.solutions_card_image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .93; }
.solutions_card_image_word { position: absolute; top: 53px; left: 20px; font: 400 clamp(30px, 3.2vw, 62px)/1 'DM Sans', sans-serif; letter-spacing: -.055em; color: #f4fafc; }
.solutions_card_image .solutions_card_surface::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, #0f4c5c88, transparent 37%, #0f4c5c22 52%, #072c38f5 100%); pointer-events: none; }
.solutions_card_image .solutions_card_image_word { z-index: 2; }
@media (max-width: 1199px) { .solutions_card_image_word { left: 14px; font-size: 37px; } }

/* 纯色大字與品牌記號，對比照片卡片形成雜誌式節奏。 */
.solutions_card_word { position: absolute; top: 27%; left: 21px; right: 16px; font: 500 clamp(31px, 3.1vw, 60px)/.98 'DM Sans', sans-serif; letter-spacing: -.055em; }
.solutions_card_mark { position: absolute; top: 19px; right: 20px; font: 400 22px/1 sans-serif; opacity: .55; }
.solutions_card_mint .solutions_card_surface { background: var(--bento_mint); color: var(--bento_ink); }
.solutions_card_teal .solutions_card_surface { background: var(--bento_teal); color: #062e3a; }
.solutions_card_deep .solutions_card_surface { background: var(--bento_ink); color: #f4fafc; }
.solutions_card_mint .solutions_card_eyebrow, .solutions_card_teal .solutions_card_eyebrow, .solutions_card_deep .solutions_card_eyebrow { padding-right: 18px; }
@media (max-width: 1199px) { .solutions_card_word { left: 14px; right: 12px; font-size: clamp(25px, 3vw, 36px); top: 31%; } }
@media (max-width: 700px) { .solutions_card_word { font-size: 33px; top: 25%; } .solutions_card_mark { right: 13px; top: 15px; font-size: 19px; } }

/* 輕量玻璃會員卡，僅以漸層和邊緣高光呈現，避免持續 backdrop blur。 */
.solutions_card_glass .solutions_card_surface { background: linear-gradient(145deg, #e5f3f6 5%, #bfdfdf 55%, #e2f8f3); color: var(--bento_ink); border: 1px solid #fff; }
.solutions_card_identity { position: absolute; left: 13%; top: 27%; width: 79%; padding: 16px; border: 1px solid #ffffffdb; border-radius: 11px; background: linear-gradient(120deg, #ffffffb3, #f4fafc12); box-shadow: 6px 16px 19px #0f4c5c19; transform: rotate(-12deg); }
.solutions_card_identity > span { font: 500 28px/1 'Manrope', sans-serif; display: flex; align-items: center; gap: 12px; }
.solutions_card_identity > span > span { font-size: 6px; letter-spacing: .15em; }
.solutions_card_identity i { display: block; width: 62%; height: 3px; background: #0f4c5c30; margin: 9px 0; }
.solutions_card_identity i + i { width: 42%; }
.solutions_card_identity b { font-size: 6px; line-height: 1.4; letter-spacing: .1em; font-weight: 500; display: block; }
@media (max-width: 700px) { .solutions_card_identity { top: 22%; padding: 12px; } }

/* 少量可讀程式語彙，作為系統整合內容的視覺提示。 */
.solutions_card_code .solutions_card_surface { background: #0c3442; }
.solutions_card_surface > .solutions_card_code { position: absolute; inset: 0; padding: 62px 21px 95px; color: #d8f5f1; }
.solutions_code_controls { position: absolute; top: 47px; font-size: 6px; letter-spacing: .2em; color: var(--bento_mint); }
.solutions_card_code strong { display: block; font: 400 clamp(38px, 3.8vw, 68px)/1.2 'DM Sans', sans-serif; letter-spacing: -.06em; margin-bottom: 16px; color: #2dd4bf; }
.solutions_card_code code { display: block; font: 400 clamp(7px, .55vw, 10px)/2.15 Consolas, monospace; white-space: nowrap; color: #b1d0d6; }
.solutions_card_code code em { color: #6ce5d5; font-style: normal; }
.solutions_card_code code > span { color: #f4fafc; }
@media (max-width: 1199px) { .solutions_card_surface > .solutions_card_code { padding-inline: 14px; } .solutions_card_code strong { font-size: 40px; } .solutions_card_code code { font-size: 7px; } }
@media (max-width: 700px) { .solutions_card_surface > .solutions_card_code { padding-top: 52px; } .solutions_code_controls { top: 36px; } .solutions_card_code strong { font-size: 34px; margin-bottom: 7px; } .solutions_card_code code { font-size: 6px; line-height: 1.8; } }

/* 無套件、降低動態或低效能裝置仍保留全部十張卡片，使用原生垂直捲動。 */
.solutions_bento:not([data-bento-mode='animated']) .solutions_bento_wall { overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: #86b1ba transparent; padding-block: 120px 24px; }
.solutions_bento:not([data-bento-mode='animated']) :is(.solutions_bento_column, .solutions_bento_column_reveal, .solutions_bento_track, .solutions_bento_group) { display: contents; }
.solutions_bento:not([data-bento-mode='animated']) .solutions_bento_card { min-height: 280px; height: auto; aspect-ratio: .7; }
.solutions_bento:not([data-bento-mode='animated']) .solutions_card_caption p { max-height: 90px; opacity: .9; margin-top: 8px; }
@media (max-width: 700px) {
    .solutions_bento:not([data-bento-mode='animated']) .solutions_bento_wall { padding-block: 0 15px; }
    .solutions_bento:not([data-bento-mode='animated']) .solutions_bento_card { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
    .solutions_bento :is(.solutions_card_surface, .solutions_card_caption p, .solutions_bento_explore) { transition: none; }
    .solutions_bento_card:is(:hover, :focus-visible) .solutions_card_surface, .solutions_bento_explore:hover { transform: none; }
}