/* ===== device_seeker.html 專屬（2026-09-23 intro 重新設計，改用獨立 flex 版型，
   不再依賴 webTechnologies/.box1/.box2 的舊式 float 排版）===== */

/* How it works 三步驟的空心數字用 Roboto Condensed 粗體，跟站內預設的 Poppins 不同，
   只在這個頁面單獨載入 */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap");

/* 每個 section 的上方間距統一 60px（跟 .webTechnologies 既有的 padding-top:3.75em 一致），
   只選 #MainWrap 直接子層的 .contents（How it works / Suitable Digital Signage Players /
   System requirement），不影響 .webTechnologies 裡面巢狀的 .contents（FAQ / whitepapers），
   那兩個已經靠 .webTechnologies 自己的 padding-top 撐出 60px，疊加會變 120px */
.ds-page > .contents {
	margin-top: 0;
	padding-top: 60px;
}

/* 所有區塊標題統一比照 digital-signage-solutions/interactive.html 的
   「Let visitors act, not just watch」：font-weight 500、color #595959（跟站內預設 Poppins 字體一致），
   蓋掉 h2 全站預設的 font-weight:300 */
.ds-page h2.f35 {
	font-weight: 500;
	color: #595959;
}

/* Intro 區塊：左文右圖 flex 排版，圖文垂直置中對齊 */
.ds-intro {
	padding: 60px 20px 0;
}

.ds-intro__inner {
	display: flex;
	align-items: center;
	gap: 64px;
	max-width: 1100px;
	margin: 0 auto;
}

.ds-intro__text {
	flex: 1 1 52%;
	min-width: 0;
	text-align: left;
}

.ds-intro__eyebrow {
	display: inline-block;
	color: #0575D7;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.ds-intro__title {
	margin: 0 0 16px;
	font-size: 2.1em;
	font-weight: 500;
	color: #595959;
	line-height: 1.25;
}

.ds-intro__desc {
	margin: 0 0 8px;
	font-size: 1.05em;
	line-height: 1.7;
	color: #595959;
}

.ds-intro__cta {
	margin-top: 140px;
	position: relative;
	z-index: 1;
}

/* Intro 三點特色：用打勾圖示取代預設項目符號，跟品牌藍呼應 */
.ds-features {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-feature {
	position: relative;
	padding-left: 30px;
}

.ds-feature::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4FC3F7, #0575D7);
}

.ds-feature::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 7px;
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.ds-feature h3 {
	margin: 0 0 4px;
	font-size: 1.0625em;
	font-weight: 600;
	color: #222;
}

.ds-feature p {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.6;
	color: #595959;
}

/* Intro 右側配圖：後面加一顆模糊漸層光暈，圖片本身維持無框（不加圓角/陰影） */
.ds-intro__media {
	position: relative;
	flex: 1 1 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ds-intro__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 340px;
	height: 340px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79, 195, 247, 0.16) 0%, rgba(5, 117, 215, 0.04) 65%, transparent 100%);
	filter: blur(6px);
	z-index: 0;
}

.ds-intro__media .ds-intro-photo {
	position: relative;
	z-index: 1;
	max-width: 360px;
	margin: 0 auto;
	top: 60px;
}

@media only screen and (max-width: 760px) {
	.ds-intro__inner {
		flex-direction: column;
		gap: 36px;
		text-align: center;
	}

	.ds-intro__text {
		text-align: center;
	}

	.ds-feature {
		text-align: left;
	}
}

/* Suitable Digital Signage Players：靜態卡片格線（不用 slider、不包 section），
   比照 CAYIN 品牌卡片規範：#F8F8F8 底、5px 圓角、冷色調陰影，hover 用 translateY 不用 scale */
.ds-players {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.ds-players__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.ds-players__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	background: #fff;
	border-radius: 5px;
	padding: 28px 16px;
	text-decoration: none;
	box-shadow: 0 0 15px rgba(87, 197, 255, 0.25);
	transition: all 0.3s cubic-bezier(0.2, 0, 0, 1.0);
}

.ds-players__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 3px 18px rgba(87, 197, 255, 0.45);
	text-decoration: none;
}

/* 圖片高度統一（不管是機身照片、logo 還是放大的 CMS-WS 圖），
   讓每張卡片下方的 product name 都對齊在同一條水平線上 */
.ds-players__img {
	width: auto;
	max-width: 140px;
	height: 60px;
	object-fit: contain;
}

.ds-players__img--logo {
	max-width: 44px;
	height: 60px;
}

.ds-players__img--large {
	max-width: 190px;
	height: 60px;
}

.ds-players__name {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #0575D7;
}

@media only screen and (max-width: 900px) {
	.ds-players__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 600px) {
	.ds-players__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Hero 左上角 icon，沿用 smp-2400.html 等產品頁 .logo.smp 的樣式，換成品牌藍邊框 */
.smpBanner-section--slant.device-seeker-sol .smpBanner-copy__inner .logo.smp {
	border-color: #bfe3fa;
	margin-bottom: 8px;
}

/* Hero 裡的 download 按鈕，跟 SMP 連結拉開一點距離 */
.smpBanner-section--slant.device-seeker-sol .ds-hero-download {
	margin-top: 22px;
	justify-content: flex-start;
}

/* device-seeker.webm 錄製檔本身邊緣有一圈黑邊（約 2.5~3%），用固定比例外框
   overflow:hidden 裁掉，影片本身放大一點填滿外框，裁出乾淨無黑邊的畫面。
   放在 How it works 下面置中（不再放 box2 裡） */
.ds-page .ds-video-frame {
	width: 100%;
	max-width: 717px;
	aspect-ratio: 776 / 413;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.ds-page .ds-video-frame--centered {
	margin: 30px auto 34px;
}

.ds-page .ds-screenshot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% calc(50% - 1px);
	transform: scale(1.06);
}

/* 三步驟：掃描 / 選擇 / 管理（比照 codepen.io/fpecher/pen/mdeYpbX，
   空心數字 + 純文字版型，無卡片背景，hover 時淺灰底 + 數字下沉並填滿實色，
   欄位之間用直線分隔；配色從原本的深藍 #003c71 換成 CAYIN 品牌藍 #0575D7）*/
.ds-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	max-width: 980px;
	margin: 22px auto 10px;
	padding: 0 20px;
	box-sizing: border-box;
}

.ds-steps__cta {
	justify-content: center;
	margin-top: 26px;
}

.ds-step {
	position: relative;
	text-align: center;
	padding: 20px 26px;
	border-radius: 6px;
	transition: background 0.4s ease-in-out;
}

.ds-step:hover {
	background: #f0f8ff;
}

.ds-step:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 75%;
	background: #8c8c8c;
	opacity: 0.2;
}

.ds-step__num {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 70px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px #0575D7;
	transition: transform 0.4s ease-in-out, color 0.4s ease-in-out;
}

.ds-step:hover .ds-step__num {
	transform: translateY(5px);
	color: #0575D7;
}

.ds-step h3 {
	display: block;
	margin: 14px 0 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1.15em;
	color: #0575D7;
	text-transform: uppercase;
}

.ds-step p {
	margin: 12px 0 0;
	font-size: 0.9em;
	line-height: 1.6;
	color: #8c8c8c;
}

@media only screen and (max-width: 820px) {
	.ds-steps {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.ds-step:not(:last-child)::after {
		display: none;
	}
}

/* 系統需求小提示 */
.ds-requirement {
	max-width: 860px;
	margin: 10px auto 0;
	padding: 18px 26px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-left: 4px solid #0575D7;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(142, 163, 175, .18);
	text-align: left;
}

.ds-requirement p {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.7;
	color: #595959;
}

/* hover / accent 統一用品牌藍，跟其他重建頁一致；hero 的漸層只留在 hero */
.ds-page .wt-faq summary::after {
	color: #0575D7;
}

.ds-page .contact-us-section .mail_btn {
	background: linear-gradient(225deg, #4FC3F7 0%, #0575D7 100%);
}

/* download_button 改用 codepen.io/karlhorning/pen/gOErPxg 的互動效果：
   點擊有水波紋(ripple)擴散,hover 時整顆按鈕下沉一點、圖示裡的箭頭持續往下滑動做出「下載中」的感覺。
   漸層底色維持原本的品牌藍(#0575D7 → #4FC3F7),文字明確指定 Poppins
   (button 元素預設不繼承 body 字體,不指定的話會掉回瀏覽器預設字體)。
   #popup 是 #MainWrap(.ds-page)的兄弟節點,不在 .ds-page 底下,所以選擇器要
   同時列出 #popup,不然彈窗裡的 Download 按鈕會掉回 device_seeker.css 裡
   238x55、黑色 icon 的舊版樣式 */
.ds-page .download_button,
#popup .download_button {
	position: relative;
	overflow: hidden;
	width: auto;
	height: auto;
	background: linear-gradient(160deg, #0575D7 0%, #0f8de0 40%, #4FC3F7 100%);
	border: none;
	border-radius: 30px;
	padding: 12px 26px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
	box-shadow: 0 4px 14px rgba(5, 117, 215, 0.35);
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ds-page .download_button:hover,
#popup .download_button:hover {
	transform: translateY(3px);
	box-shadow: 0 2px 8px rgba(5, 117, 215, 0.35);
}

.ds-page .download_text,
#popup .download_text {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 16px;
}

.ds-page .download_icon,
#popup .download_icon {
	flex-shrink: 0;
	overflow: hidden;
}

.ds-page .download_icon .ds-download-bottom,
.ds-page .download_icon .ds-download-arrow,
#popup .download_icon .ds-download-bottom,
#popup .download_icon .ds-download-arrow {
	fill: #fff;
}

.ds-page .download_button:hover .ds-download-arrow,
#popup .download_button:hover .ds-download-arrow {
	animation: dsDownloadArrow 0.9s ease-in-out infinite;
}

@keyframes dsDownloadArrow {
	0% { transform: translateY(0); }
	100% { transform: translateY(90px); }
}

/* 點擊水波紋 */
.ds-page .download_button .ds-ripple,
#popup .download_button .ds-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transform: scale(0);
	transform-origin: 50% 50%;
	animation: dsRipple 0.6s linear;
	pointer-events: none;
}

@keyframes dsRipple {
	to {
		opacity: 0;
		transform: scale(3.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-page .download_button:hover .ds-download-arrow,
	#popup .download_button:hover .ds-download-arrow {
		animation: none;
	}

	.ds-page .download_button .ds-ripple,
	#popup .download_button .ds-ripple {
		animation: none;
		display: none;
	}
}