/* ==========================================================================
   首頁九段樣式
   對應 patterns/home.php，只在首頁載入（見 functions.php 的條件式 enqueue）
   ========================================================================== */

/* 通用區段元件（.aark-section / .aark-section-head / .aark-section-lede /
   .aark-text-link / .aark-pending）已移到 style.css 第 4b 節，全站共用。
   這裡不要重複定義。 */


/* --- 01 Hero --------------------------------------------------------- */

.aark-hero { overflow: hidden; padding: 0; }

.aark-hero-grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	min-height: 640px;
}

.aark-hero-copy {
	padding: 5rem 4rem 5rem max(1.5rem, calc((100vw - 1240px) / 2));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.aark-hero-title {
	margin: 1.2rem 0 0;
	line-height: 1.08;
	letter-spacing: -.045em;
	max-width: 15ch;
}

.aark-hero-title em {
	font-style: normal;
	color: var(--aark-orange-ink);
	white-space: nowrap;
}

.aark-hero-lede {
	color: var(--aark-slate);
	max-width: 46ch;
	margin: 1.6rem 0 2rem;
}

.aark-hero-note {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
	margin: 3.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--aark-line);
	font-family: var(--aark-mono);
	font-size: .75rem;
	color: var(--aark-slate);
}

.aark-hero-art {
	position: relative;
	background: var(--aark-mist);
	overflow: hidden;
	min-height: 640px;
}

.aark-hero-art::before {
	content: "";
	position: absolute;
	width: 580px;
	height: 580px;
	border: 1px solid rgba(130, 152, 255, .28);
	border-radius: 50%;
	right: -160px;
	top: -210px;
	box-shadow: 0 0 0 80px rgba(130, 152, 255, .04), 0 0 0 160px rgba(130, 152, 255, .025);
}

.aark-browser {
	position: absolute;
	left: 7%;
	right: -7%;
	top: 10%;
	bottom: 8%;
	background: #fff;
	box-shadow: 0 36px 90px rgba(0, 0, 62, .24);
	transform: rotate(-2.5deg);
	overflow: hidden;
}

.aark-browser-top {
	height: 46px;
	background: #e9e8eb;
	border-bottom: 1px solid #d3d2d7;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
}

/* 以下灰階刻意模仿 Chrome 視窗 UI，非品牌色，不進 token */
.aark-browser-top i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c8c7cc;
}

.aark-browser-top i:first-child { background: var(--aark-orange); }
.aark-browser-top i:nth-child(2) { background: #f6c04d; }
.aark-browser-top i:nth-child(3) { background: var(--aark-blue); }

.aark-browser img {
	width: 100%;
	height: calc(100% - 46px);
	object-fit: cover;
}

.aark-floating-tag {
	position: absolute;
	z-index: 3;
	background: var(--aark-orange);
	color: var(--aark-white);
	font-weight: 900;
	padding: 1.1rem 1.5rem;
	left: 2%;
	bottom: 7%;
	transform: rotate(2deg);
	box-shadow: 8px 8px 0 var(--aark-blue);
}

.aark-floating-tag small {
	display: block;
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
}


/* --- 03 服務層級 ------------------------------------------------------
 *
 * 2026-09-07 改版：三張卡改成「左圖右文」，左右兩欄刻意上下錯開（右欄整體下移），
 * 圖片右緣斜切，滑鼠移上去時圖片微放大、斜邊抖一下。斜角語彙與站上既有的
 * 45 度斜紋、Hero 的傾斜視窗是同一套。
 *
 * 卡片結構（全部是 core/group，Mark 可以在 Kadence 直接換圖改字）：
 *   .aark-service-main / .aark-service-side
 *     ├ .aark-service-figure → core/image
 *     └ .aark-service-copy   → .aark-service-body（眉標／標題／內文／標籤）+ .aark-service-link
 */

.aark-services-grid {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
	align-items: start;
	border: 0;
}

/*
 * 左右錯開的方式：右欄兩張卡從頂端排起，左邊那張主卡對齊右欄的垂直中線
 * （align-self: center）。所以三張卡都不落在同一條水平線上，
 * 而主卡的重心正好落在兩張副卡中間。
 */
.aark-service-sides {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.aark-service-main { align-self: center; }

.aark-service-main,
.aark-service-side {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
	border: 1px solid var(--aark-navy);
	overflow: hidden;
}

.aark-service-main { background: var(--aark-white); min-height: 360px; }
.aark-service-side { min-height: 252px; }

/* --- 圖：右緣斜切 --- */
.aark-service-figure {
	position: relative;
	overflow: hidden;
	background: var(--aark-mist);
	clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.aark-service-figure figure { margin: 0; height: 100%; }

.aark-service-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* --- 文 --- */
.aark-service-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .35rem;
	min-width: 0;
	padding: clamp(1.4rem, 2.2vw, 2.4rem);
	padding-left: clamp(.75rem, 1.2vw, 1.4rem);
}

.aark-service-main h3,
.aark-service-side h3 {
	font-family: var(--aark-serif);
	font-size: clamp(1.55rem, 2.1vw, 2.05rem);
	line-height: 1.18;
	margin: .6rem 0 .5rem;
	color: var(--aark-navy);
}

.aark-service-side h3 { font-size: clamp(1.35rem, 1.7vw, 1.65rem); }

.aark-service-main p,
.aark-service-side p {
	font-size: .92rem;
	color: var(--aark-slate);
	max-width: 40ch;
}

.aark-service-list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin-top: 1.1rem;
	font-size: .8rem;
}

.aark-service-list span {
	border-top: 1px solid rgba(0, 0, 62, .22);
	padding-top: .5rem;
}

.aark-service-main .aark-text-link { color: var(--aark-orange-ink); }

.aark-service-side.is-dark {
	background: var(--aark-navy);
	color: var(--aark-white);
}

.aark-service-side.is-dark h3 { color: var(--aark-white); }
.aark-service-side.is-dark p { color: rgba(255, 255, 255, .72); }
.aark-service-side.is-dark .aark-eyebrow { color: var(--aark-blue); }
.aark-service-side.is-dark .aark-text-link { color: var(--aark-white); }

.aark-service-side.is-mist { background: var(--aark-mist); }

/*
 * AI 卡的圖是 1720×497 的橫幅（AI 雷達的分數畫面）。直式圖位裡置中裁切只會
 * 切到中間一片空白，所以往左偏，讓網域標籤與 SEO／AEO 兩張分數卡進到畫面。
 * 窄螢幕的圖位是 16:9，橫幅本來就合適，維持置中。
 * ⚠ 這條綁在「那張橫幅」上；日後換成一般比例的圖，把它刪掉即可。
 */
@media (min-width: 601px) {
	.aark-service-side.is-dark .aark-service-figure img { object-position: 15% center; }
}

/*
 * 滑鼠移上去：圖片微放大 + 斜邊抖一下。
 * clip-path 的 polygon 點數相同才能補間，所以四個點都用百分比、不用 calc()。
 * 只在有真正指標裝置時啟用（hover: hover），觸控裝置點一下不會誤觸。
 */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	@keyframes aark-service-edge {
		0%   { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
		18%  { clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
		38%  { clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
		58%  { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
		78%  { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
		100% { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
	}

	.aark-service-main:hover .aark-service-figure,
	.aark-service-side:hover .aark-service-figure {
		animation: aark-service-edge .62s cubic-bezier(.3, .7, .3, 1);
	}

	.aark-service-main:hover .aark-service-figure img,
	.aark-service-side:hover .aark-service-figure img { transform: scale(1.07); }
}


/* --- 04 案例 ---------------------------------------------------------- */

.aark-case-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.4rem;
}

.aark-case {
	position: relative;
	overflow: hidden;
	background: var(--aark-mist);
	color: #fff;
	display: block;
}

/* 版位由下面的跑馬燈軌道決定，不再用 12 欄格線 */

.aark-case img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .5s;
}

/*
 * 卡片從 420px 變成 261px 之後，漸層要從更上面開始，
 * 否則淺色的網站截圖會讓眉標與標題吃不到對比。
 */
.aark-case::after {
	content: "";
	position: absolute;
	inset: 12% 0 0;
	background: linear-gradient(transparent, rgba(0, 0, 35, .42) 42%, rgba(0, 0, 35, .96));
}

.aark-case:hover img { transform: scale(1.035); }

/* 卡片矮了（261px），文字跟著收 —— 客戶名與類型仍要看得清楚 */
.aark-case-copy {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1rem;
	z-index: 2;
}

.aark-case-copy small {
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .04em;
	color: var(--aark-blue);
}

.aark-case-copy h3 {
	font-family: var(--aark-serif);
	font-size: 1.28rem;
	margin: .2rem 0 .1rem;
	color: #fff;
}

.aark-case-copy span { font-size: .76rem; color: rgba(255, 255, 255, .78); }

.aark-cases-foot { margin-top: 2rem; }


/* --- 05 價格 ---------------------------------------------------------- */

.aark-price-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: end;
	margin-bottom: 2.6rem;
}

.aark-price-intro h2 { margin: 0; }
.aark-price-intro p { margin: 0; font-size: var(--aark-md); }

.aark-price-table { border-top: 2px solid var(--aark-navy); }

.aark-price-row {
	display: grid;
	grid-template-columns: 70px 1.05fr 1.55fr .8fr .8fr;
	gap: 1.5rem;
	align-items: center;
	padding: 1.6rem 0;
	border-bottom: 1px solid rgba(0, 0, 62, .38);
}

.aark-price-row .num { font-family: var(--aark-mono); font-size: .75rem; }
.aark-price-row h3 { font-family: var(--aark-serif); font-size: 1.5rem; margin: 0; }
.aark-price-row p { margin: 0; color: var(--aark-slate); font-size: .92rem; }
.aark-price-row b { text-align: right; font-family: var(--aark-mono); font-size: 1rem; }

.aark-price-action {
	display: inline-flex;
	justify-self: end;
	background: var(--aark-orange);
	color: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: .5rem .75rem;
	box-shadow: 3px 3px 0 var(--aark-blue);
	font-weight: 900;
	font-size: .84rem;
	white-space: nowrap;
}


/* --- 06 AI 雷達 ------------------------------------------------------- */

.aark-ai-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 4.5rem;
	align-items: center;
}

.aark-ai-copy h2 { margin: .9rem 0 1.4rem; }
.aark-ai-copy p { color: rgba(255, 255, 255, .72); font-size: var(--aark-md); }

.aark-ai-points { margin: 2rem 0; }

.aark-ai-points div {
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding: .85rem 0;
	display: flex;
	gap: 1rem;
	font-size: .92rem;
	color: rgba(255, 255, 255, .8);
}

.aark-ai-points b {
	color: var(--aark-blue);
	font-family: var(--aark-mono);
	font-size: .78rem;
}

.aark-ai-visual { display: flex; justify-content: center; }

.aark-radar {
	position: relative;
	width: min(340px, 80vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--aark-navy-deep);
	border: 1px solid rgba(255, 255, 255, .18);
	overflow: hidden;
}

.aark-radar .rd-grid::before,
.aark-radar .rd-grid::after {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, .12);
}

.aark-radar .rd-grid::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.aark-radar .rd-grid::after { top: 50%; left: 0; right: 0; height: 1px; }

.aark-radar .rd-ring {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.aark-radar .rd-r1 { width: 33%; height: 33%; }
.aark-radar .rd-r2 { width: 66%; height: 66%; }
.aark-radar .rd-r3 { width: 99%; height: 99%; }

.aark-radar .rd-sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(130, 152, 255, .5), rgba(130, 152, 255, 0) 55deg);
	animation: aark-rdspin 4s linear infinite;
}

/*
 * 訊號點
 *
 * 脈動放在 ::before（點本身）而不是 .rd-blip，因為標籤是 .rd-blip 的
 * 子元素 —— 動畫掛在父層時文字會跟著一起忽明忽暗，讀的人抓不到。
 * 點閃、字不閃，訊號感留著，可讀性也留著。
 */
.aark-radar .rd-blip {
	position: absolute;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%);
}

.aark-radar .rd-blip::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	animation: aark-rdpulse 2.4s ease-in-out infinite;
	animation-delay: inherit;
}

/*
 * 模型名稱
 *
 * ⚠ 選擇器原本寫 em，但標記用的是 span —— 兩邊對不上，標籤完全沒吃到
 *   樣式。沒有 position:absolute 也沒有 white-space:nowrap，文字就被
 *   擠在 9px 寬的圓點裡，變成一個字一行、三組還互相重疊。
 *
 * 位置改成「在圓點正下方置中」而不是原本的右側：
 *   .aark-radar 有 overflow:hidden（要把十字線裁進圓裡），標籤放右側時
 *   靠近圓周會被切掉。置中在下方，三個標籤都落在圓內且彼此不重疊。
 */
.aark-radar .rd-blip span,
.aark-radar .rd-blip em {
	position: absolute;
	left: 50%;
	top: 15px;
	transform: translateX(-50%);
	font-family: var(--aark-mono);
	font-size: .7rem;
	letter-spacing: .04em;
	font-style: normal;
	color: rgba(255, 255, 255, .82);
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 9, 38, .9);
}

.aark-radar .rd-b1 { left: 62%; top: 29%; animation-delay: 0s; }
.aark-radar .rd-b2 { left: 36%; top: 47%; animation-delay: .8s; }
.aark-radar .rd-b3 { left: 60%; top: 67%; animation-delay: 1.6s; }

@keyframes aark-rdspin { to { transform: rotate(360deg); } }
@keyframes aark-rdpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }


/* --- 07 產品 ---------------------------------------------------------- */

.aark-product-lines { border-top: 1px solid var(--aark-navy); }

.aark-product-line {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	gap: 2.25rem;
	align-items: center;
	padding: 2rem 0;
	border-bottom: 1px solid var(--aark-navy);
}

.aark-product-line span { font-family: var(--aark-mono); font-size: .75rem; }
.aark-product-line h3 { font-family: var(--aark-serif); font-size: 1.85rem; margin: 0; }
.aark-product-line p { color: var(--aark-slate); margin: .3rem 0 0; font-size: .92rem; }

/* --- 04 自研產品：四張卡（上圖、下標題與副標題） ---------------------
 *
 * 2026-09-09 從 .aark-product-lines 那組橫條清單改過來。改的理由是四個產品
 * 各自有一張帶主標的圖卡，橫條清單放不下圖；卡片式也讓四個產品看起來是
 * 對等的四件東西，而不是一份由上往下的名單。
 *
 * 整張卡可點：Kadence column 的 link 屬性會輸出 .kb-section-link-overlay，
 * 所以這裡不另外做連結樣式，只做 hover 回饋（圖微放大、標題轉橘）。
 *
 * ⚠ 圖片比例鎖 16:10 —— 四張來源圖都是 1200x750，但鎖住之後日後換圖
 *   不同比例也不會讓四張卡高度參差。
 */
/*
 * ⚠ position: relative 不能拿掉。
 *
 * Kadence column 的 link 屬性會輸出一個 position:absolute; inset:0 的
 * .kb-section-link-overlay。手寫區塊的 column 預設是 position:static，
 * 覆蓋層就會往上找到「整列」當定位基準 —— 四張卡的覆蓋層全部變成
 * 1240px 寬疊在一起，DOM 最後那張贏：整列不管點哪裡都連到第四張，
 * 而且只有第四張吃得到 :hover（所以只有它的圖會放大）。
 * 跑馬燈的 .aark-case 早就寫了這條，這裡漏掉才踩到。
 */
.aark-pcard { position: relative; }

.aark-pcard .kt-inside-inner-col { display: flex; flex-direction: column; }

.aark-pcard figure.wp-block-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--aark-mist);
}

.aark-pcard figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.aark-pcard:hover figure.wp-block-image img { transform: scale(1.04); }

.aark-pcard .aark-pcard-copy { margin-top: 1rem; }

.aark-pcard .aark-pcard-copy h3 {
	font-family: var(--aark-serif);
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: 700;
	margin: 0;
	color: var(--aark-navy);
	transition: color .18s ease;
}

.aark-pcard:hover .aark-pcard-copy h3 { color: var(--aark-orange-ink); }

.aark-pcard .aark-pcard-copy p {
	margin: .4rem 0 0;
	font-size: .82rem;
	line-height: 1.7;
	color: var(--aark-slate);
}

@media (prefers-reduced-motion: reduce) {
	.aark-pcard figure.wp-block-image img,
	.aark-pcard:hover figure.wp-block-image img { transition: none; transform: none; }
}


/* --- 09 最終 CTA ------------------------------------------------------ */

.aark-cta {
	padding-block: var(--aark-space-60);
	text-align: center;
}

.aark-cta h2 { margin: 0 auto 1rem; max-width: 16ch; }

.aark-cta-lede {
	max-width: 56ch;
	margin: 0 auto 2rem;
	font-size: var(--aark-md);
}

/* 橘底上的主按鈕改深藏青，維持對比 */
.aark-cta-dark .wp-block-button__link {
	background: var(--aark-navy);
	border-color: var(--aark-navy);
	color: var(--aark-white);
	box-shadow: 7px 7px 0 var(--aark-navy-raise);
}


/* --- 響應式 ----------------------------------------------------------- */

@media (max-width: 960px) {
	.aark-section-head { grid-template-columns: 1fr; gap: .5rem; }
	.aark-hero-grid { grid-template-columns: 1fr; }
	.aark-hero-copy { padding: 4rem 1.5rem; }
	.aark-hero-art { min-height: 420px; }
	.aark-services-grid,
	.aark-ai-grid,
	.aark-price-intro { grid-template-columns: 1fr; }
	.aark-service-main { align-self: stretch; }
	.aark-price-intro { gap: 1.5rem; }
	/* 案例已改成跑馬燈，卡片尺寸見相容區第 5 節 */
	.aark-price-row { grid-template-columns: 48px 1fr; }
	.aark-price-row p,
	.aark-price-row b,
	.aark-price-action { grid-column: 2; text-align: left; justify-self: start; }
	.aark-product-line { grid-template-columns: 110px 1fr; }
	.aark-product-line > a { grid-column: 2; }
	.aark-ai-visual { order: -1; }
}

@media (max-width: 600px) {
	.aark-service-main,
	.aark-service-side { grid-template-columns: 1fr; min-height: 0; }
	/* 窄螢幕改成上圖下文，斜邊也跟著轉成底邊 */
	.aark-service-figure { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); aspect-ratio: 16 / 9; }
	.aark-service-copy { padding: 1.6rem; }
	.aark-service-main h3,
	.aark-service-side h3 { font-size: 1.6rem; }
	.aark-hero-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; font-size: .58rem; }
	.aark-product-line { grid-template-columns: 1fr; gap: .5rem; }
	.aark-product-line > a { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-radar .rd-sweep { animation: none; opacity: .3; }
	.aark-radar .rd-blip::before { animation: none; opacity: .8; }
	.aark-case:hover img { transform: none; }
}


/* ==========================================================================
   Hero 行動列與最終 CTA

   這兩段是把原型搬進 WordPress 時新增的：
   原型的 hero 按鈕沒有獨立容器，最終 CTA 也只有單欄。
   實際上線版把聯絡方式直接放進最終 CTA 的右欄 —— 訪客滑到頁尾前
   就能直接打電話，不必再多跳一頁。
   ========================================================================== */

.aark-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin: 0 0 1.75rem;
}

/* --- 第 9 段：最終 CTA --- */

.aark-home-cta {
	background: var(--aark-orange);
	color: var(--aark-white);
	/* 比一般區段再寬鬆一級，維持「這是終點」的層級（2026-09-08） */
	padding: clamp(4.5rem, 11vw, 11rem) 0;
}

.aark-home-cta-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 4rem;
	align-items: center;
}

.aark-home-cta h2 {
	font-family: var(--aark-serif);
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.04em;
	color: var(--aark-white);
	margin: .9rem 0 1rem;
}

/*
 * ⚠ 只作用於左欄。
 * 這條原本寫成 .aark-home-cta > .aark-wrap > div > p，兩個 class 加一個元素
 * 選擇器 =(0,2,1)，比 .aark-home-cta-addr(0,1,0) 與
 * .aark-home-cta-side .aark-eyebrow(0,2,0) 都高 —— 於是「給橘底用的藏青字」
 * 連右邊深藏青卡裡的眉標與地址也一起吃掉，變成藏青字配藏青底。
 * 元素選擇器那一分很容易被忽略，這裡用 :not() 明確排除右卡。
 */
.aark-home-cta > .aark-wrap > div:not(.aark-home-cta-side) > p {
	color: #ffffff;
	font-weight: 600;
	font-size: var(--aark-md);
	max-width: 42ch;
}

.aark-home-cta > .aark-wrap > div:not(.aark-home-cta-side) .aark-eyebrow { color: #ffffff; font-weight: 700; }

.aark-home-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin-top: 1.9rem;
}

/* 橘底上的按鈕：實心改成藏青，否則橘配橘看不出來 */
.aark-home-cta .aark-btn-solid {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
	box-shadow: 7px 7px 0 rgba(0, 0, 62, .28);
}

.aark-home-cta .aark-btn-outline {
	border-color: var(--aark-navy);
	color: var(--aark-navy);
}

/* --- 右欄：直接聯絡 --- */

.aark-home-cta-side {
	background: var(--aark-navy);
	color: var(--aark-white);
	padding: 2.5rem;
	box-shadow: 9px 9px 0 rgba(0, 0, 62, .22);
}

.aark-home-cta-side .aark-eyebrow { color: var(--aark-blue); }

.aark-home-cta-side p { margin: 0 0 .5rem; }

.aark-home-cta-tel a,
.aark-home-cta-mail a {
	font-family: var(--aark-mono);
	color: var(--aark-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	transition: border-color .16s ease;
}

.aark-home-cta-tel a { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }

.aark-home-cta-mail a { font-size: .92rem; }

.aark-home-cta-tel a:hover,
.aark-home-cta-mail a:hover { border-bottom-color: var(--aark-orange); }

.aark-home-cta-tel a:focus-visible,
.aark-home-cta-mail a:focus-visible {
	outline: 2px solid var(--aark-orange);
	outline-offset: 3px;
}

.aark-home-cta-addr {
	margin-top: 1.25rem !important;
	font-size: .82rem;
	color: rgba(255, 255, 255, .68);
	line-height: 1.8;
}

@media (max-width: 960px) {
	.aark-home-cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.aark-home-cta { padding: 3.5rem 0; }
}

@media (max-width: 600px) {
	.aark-hero-actions,
	.aark-home-cta-actions { display: grid; }
	.aark-hero-actions .aark-btn,
	.aark-home-cta-actions .aark-btn { width: 100%; }
	.aark-home-cta-side { padding: 1.75rem; box-shadow: 6px 6px 0 rgba(0, 0, 62, .22); }
	.aark-home-cta-tel a { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-home-cta-tel a,
	.aark-home-cta-mail a { transition: none; }
}


/* ==========================================================================
   區段底色與滿版容器

   為什麼要補這一段：
   home.css 原本是給「區塊主題」用的。那時每一段的背景色是由區塊屬性
   （backgroundColor="navy"）決定，CSS 只負責裡面的元件，所以整支檔案
   查不到任何區段層級的 background。搬到 Kadence 之後沒有那些區塊屬性，
   深色段就變成白底白字 —— 信任快照、AI 雷達那兩段等於整段消失。
   ========================================================================== */

/* --- 滿版容器 ---
 * Kadence 的 fullwidth 只是拿掉側邊欄，容器仍保留 max-width 與 2rem 內距。
 * 我們每一段都自己畫背景與內距，需要真正的滿版才不會出現左右白邊。
 * 只作用在 content-width-fullwidth（固定頁），文章頁維持有框有內距。
 */
.content-width-fullwidth .content-container.site-container {
	max-width: none;
	padding-inline: 0;
}

.content-width-fullwidth .entry-content-wrap { padding: 0; }

/* 區塊編輯器裡也要看得到同樣的滿版效果 */
.editor-styles-wrapper .aark-section { max-width: none; }


/* --- 各段底色 --- */

.aark-hero { background: var(--aark-paper); }

/*
 * 主要服務：淺方格紙底（2026-09-07）
 *
 * 用 CSS 畫，不放圖檔 —— 跟站上其他裝飾（Hero 的瀏覽器視窗、AI 雷達、
 * 45 度斜紋）同一個原則：不留空區塊給人誤刪，也不多一支 HTTP 請求。
 *
 * 單一粗細的 40px 方格，往下淡出。淡出那層是「紙色的漸層」疊在格線上面
 * （背景圖層先列的畫在上面），不是遮罩 —— 這樣就不必給 .aark-services
 * 加 position:relative。標頭那條斜線是 position:absolute 且用
 * left: calc(-50vw + 50%) 撐到視窗邊緣，一旦這裡多一個定位祖先就會壞掉。
 *
 * 淡出用的顏色必須跟 background-color 是同一個 token，否則接縫會看得出來。
 */
.aark-services {
	background-color: var(--aark-paper);
	background-image:
		linear-gradient(to bottom, transparent 0%, transparent 42%, var(--aark-paper) 94%),
		linear-gradient(rgba(0, 0, 62, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 62, .055) 1px, transparent 1px);
	background-size: 100% 100%, 40px 40px, 40px 40px;
}

.aark-cases    { background: var(--aark-white); }

.aark-pricing  { background: var(--aark-paper); }

/* AI 段是全站唯一的深色大區塊，雷達動畫要在深底上才有訊號感 */
.aark-ai {
	position: relative;
	background: var(--aark-navy-deep);
	color: var(--aark-white);
	border-top: 0;
	overflow: hidden;
}

/*
 * 背景圖 + 深藏青漸層（作法與頁首 .aark-phead.has-bg 一致）
 *
 * 底色保留 navy-deep：還沒接圖時，這一段的外觀跟原本完全一樣，
 * 不會因為少一張圖就開天窗。
 *
 * 三層各自標明 z-index，不靠堆疊順序猜。
 */

/* 第 0 層：背景圖 */
/*
 * 背景層還沒有圖時的正式底紋——與內頁頁首（style.css 的 .aark-phead.has-bg div.aark-phead-bg）
 * 同一個決定（2026-09-03）：斜紋隔著 veil 看就是設計的一部分；換上 <img> 後這條自然退場。
 */
.aark-ai div.aark-ai-bg {
	background: repeating-linear-gradient(
		45deg,
		var(--aark-paper) 0 10px,
		rgba(255, 110, 52, .10) 10px 20px
	);
}

.aark-ai .aark-ai-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	margin: 0;
	max-width: none;
}

/*
 * 第 1 層：漸層遮罩，左濃右淡
 *
 * 文字在左欄、雷達在右欄，所以左側壓到 .96 保文字對比，
 * 右側留 .74 讓圖透出來一點 —— 但不能再淡了，雷達的掃描動畫
 * 與細線在雜訊背景上會糊掉。
 */
.aark-ai .aark-ai-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		rgba(0, 9, 38, .96) 0%,
		rgba(0, 9, 38, .90) 42%,
		rgba(0, 9, 38, .74) 100%);
	pointer-events: none;
}

/* 第 2 層：內容 */
.aark-ai > .aark-wrap { position: relative; z-index: 2; }

/* 手機：單欄堆疊時文字會壓到右半邊，改成整片均勻壓深 */
@media (max-width: 900px) {
	.aark-ai .aark-ai-veil {
		background: linear-gradient(180deg,
			rgba(0, 9, 38, .93) 0%,
			rgba(0, 9, 38, .90) 100%);
	}
}

.aark-ai h2,
.aark-ai .aark-eyebrow { color: var(--aark-white); }

.aark-ai .aark-eyebrow { color: var(--aark-blue); }

.aark-products { background: var(--aark-white); }

.aark-reviews  { background: var(--aark-paper); }


/* --- Hero：滿版後的欄位對齊 ---
 * .aark-hero-copy 用 calc((100vw - 1240px) / 2) 讓文字對齊內容欄的左緣，
 * 前提是這一段本身滿版。因此 hero 的格線不套 .aark-wrap，
 * 由左欄自己的內距負責對齊，右邊的作品圖才能一路延伸到視窗邊緣。
 */
.aark-hero-grid { width: 100%; max-width: none; }


/* --- 首頁方案列按鈕的 hover（理由見 style.css） --- */

.aark-price-action:hover,
.aark-price-action:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

.aark-hero-actions .aark-btn-solid:hover,
.aark-hero-actions .aark-btn-solid:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* ==========================================================================
   區塊版相容：首頁（2026-09-04）

   首頁九個區段改成 core/group + Kadence Row Layout 之後只多了兩件事：
   （1）每個群組會多包一層 .wp-block-group__inner-container；
   （2）Kadence 主題的 content.min.css 對 .single-content 裡的群組與段落
        設了 2rem 的 margin-bottom，會蓋掉設計自己的間距。

   對策一律是：把多出來的那一層用 display:contents 透明化，讓上面已經寫好的
   .aark-hero-grid / .aark-services-grid / .aark-price-row … 直接作用在真正的
   子元素上，而不是在這裡把每一組格線重寫一遍（重寫過一次，結果是版面被
   算兩次高度，主要服務卡被撐成兩倍高，AI 區的深色濾鏡也蓋不住背景圖 ——
   因為 inner-container 一旦有 z-index 就自成一個堆疊環境）。

   ⚠ 裝飾性的東西一律用 CSS 畫，不留空群組給人誤刪：
   瀏覽器視窗的標題列與三顆燈、雷達的環與掃描線、AI 區的深色濾鏡。
   有文字的才留成區塊 —— 雷達上的三個引擎名稱就是段落，可以改字。
   ========================================================================== */

/* --- 1. 把多包的那一層透明化 --- */
.aark-hero > .wp-block-group__inner-container,
.aark-hero-grid > .wp-block-group__inner-container,
.aark-hero-copy > .wp-block-group__inner-container,
.aark-hero-art > .wp-block-group__inner-container,
.aark-browser > .wp-block-group__inner-container,
.aark-services-grid > .wp-block-group__inner-container,
.aark-service-main > .wp-block-group__inner-container,
.aark-service-sides > .wp-block-group__inner-container,
.aark-service-side > .wp-block-group__inner-container,
.aark-service-body > .wp-block-group__inner-container,
.aark-service-figure > .wp-block-group__inner-container,
.aark-service-copy > .wp-block-group__inner-container,
.aark-case-copy > .wp-block-group__inner-container,
.aark-price-intro > .wp-block-group__inner-container,
.aark-price-table > .wp-block-group__inner-container,
.aark-price-row > .wp-block-group__inner-container,
.aark-ai > .wp-block-group__inner-container,
.aark-ai-grid > .wp-block-group__inner-container,
.aark-ai-copy > .wp-block-group__inner-container,
.aark-ai-visual > .wp-block-group__inner-container,
.aark-ai-points > .wp-block-group__inner-container,
.aark-radar > .wp-block-group__inner-container,
.aark-product-lines > .wp-block-group__inner-container,
.aark-product-line > .wp-block-group__inner-container,
.aark-pcard-copy > .wp-block-group__inner-container,
.aark-product-body > .wp-block-group__inner-container,
.aark-home-cta > .wp-block-group__inner-container,
.aark-home-cta-grid > .wp-block-group__inner-container,
.aark-home-cta-main > .wp-block-group__inner-container,
.aark-home-cta-side > .wp-block-group__inner-container { display: contents; }

/* --- 2. Kadence 主題的群組／段落 margin 歸零（設計自己管間距的容器） --- */
.single-content .wp-block-group.aark-hero,
.single-content .wp-block-group.aark-hero-grid,
.single-content .wp-block-group.aark-hero-copy,
.single-content .wp-block-group.aark-hero-art,
.single-content .wp-block-group.aark-browser,
.single-content .wp-block-group.aark-services-grid,
.single-content .wp-block-group.aark-service-main,
.single-content .wp-block-group.aark-service-sides,
.single-content .wp-block-group.aark-service-side,
.single-content .wp-block-group.aark-service-body,
.single-content .wp-block-group.aark-service-figure,
.single-content .wp-block-group.aark-service-copy,
.single-content .wp-block-group.aark-case-copy,
.single-content .wp-block-group.aark-price-table,
.single-content .wp-block-group.aark-price-row,
.single-content .wp-block-group.aark-ai,
.single-content .wp-block-group.aark-ai-copy,
.single-content .wp-block-group.aark-ai-visual,
.single-content .wp-block-group.aark-radar,
.single-content .wp-block-group.aark-product-lines,
.single-content .wp-block-group.aark-product-line,
.single-content .wp-block-group.aark-product-body,
.single-content .wp-block-group.aark-pcard-copy,
.single-content .wp-block-group.aark-home-cta,
.single-content .wp-block-group.aark-home-cta-main,
.single-content .wp-block-group.aark-home-cta-side { margin: 0; }
.single-content .wp-block-group.aark-ai-points { margin: 2rem 0; }
.single-content .wp-block-group.aark-price-intro { margin: 0 0 2.6rem; }

/*
 * ⚠ display:contents 只拿掉盒子，不改選擇器的匹配：home.css 裡用
 * 子層組合子 > 寫的規則（.aark-ai > .aark-wrap 、
 * .aark-home-cta > .aark-wrap > div:not(.aark-home-cta-side) > p）在區塊版不會
 * 命中，因為 DOM 上還隔著一層 inner-container。這一組是補回來的。
 * （漏了第一條的後果：AI 區的文字跟雷達排在深色濾鏡底下，整片看不見。）
 */
.aark-ai .aark-wrap { position: relative; z-index: 2; }
.aark-home-cta-main p {
	color: #ffffff;
	font-weight: 600;
	font-size: var(--aark-md);
	max-width: 42ch;
	margin: 0;
}
.aark-home-cta-main .aark-eyebrow { color: #ffffff; font-weight: 700; }

/*
 * 內容欄寬：WP 的 constrained layout 會對 inner-container 的每個子層加上
 * margin-inline:auto !important —— 有 max-width 的段落（15ch / 44ch / 46ch）
 * 會被置中。這裡改回靠左，但不動 max-width（動了就會洗掉設計的欄寬）。
 * .aark-wrap 要排除，它本來就是靠 auto 置中的。
 */
.aark-hero .wp-block-group__inner-container > *,
.aark-services .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-cases .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-pricing .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-ai .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-products .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-reviews .wp-block-group__inner-container > *:not(.aark-wrap),
.aark-home-cta .wp-block-group__inner-container > *:not(.aark-wrap) { margin-inline: 0 !important; }

/* --- 3. Hero：瀏覽器視窗的標題列與三顆燈全用 CSS 畫 --- */
.aark-browser::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 46px;
	background: #e9e8eb;
	border-bottom: 1px solid #d3d2d7;
	z-index: 2;
}
/* 三顆燈是同一個 ::after 加兩道 box-shadow，不必為了裝飾多三個空區塊 */
.aark-browser::after {
	content: "";
	position: absolute;
	left: 16px; top: 18px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--aark-orange);
	box-shadow: 18px 0 0 #f6c04d, 36px 0 0 var(--aark-blue);
	z-index: 3;
}
.single-content .aark-browser figure.wp-block-image {
	margin: 0;
	height: 100%;
	padding-top: 46px;
}
.aark-browser figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-content p.aark-floating-tag { margin: 0; }
.single-content h1.aark-hero-title { margin: 1.2rem 0 0; }
.single-content p.aark-hero-lede { margin: 1.6rem 0 2rem; }
.single-content p.aark-hero-note { margin: 3.25rem 0 0; }
.single-content .wp-block-buttons.aark-hero-actions { margin: 0 0 1.75rem; }
.single-content .aark-hero-actions .wp-block-button,
.single-content .aark-home-cta-actions .wp-block-button { margin: 0; }

/* --- 4. 服務區：三張卡的內文間距 --- */
.single-content .aark-service-main h3,
.single-content .aark-service-side h3 { margin: 1rem 0; }
.single-content .aark-service-main p,
.single-content .aark-service-side p { margin: 0; }
.single-content p.aark-service-list { margin-top: 2rem; }
.single-content p.aark-service-link { margin: 1.25rem 0 0; }

/* --- 5. 案例區：兩排反向的滿版跑馬燈 ---
 *
 * 2026-09-07 從 12 欄拼貼改成左右連續輪播，比照 takuto-design.com：
 * 卡片 464×261（16:9）、每秒 48px、等速不停、上排往左下排往右，
 * 兩排都做滿版出血。不是點擊翻頁式的 slider。
 *
 * 軌道長度、位移量與週期都由 assets/js/aark-marquee.js 依實際卡片寬算出來，
 * 寫進 CSS 變數 —— 卡片增減或視窗縮放都不必回來改數字。
 * 沒有 JS 時就是一排靜態卡片，內容照樣看得到。
 */

/*
 * 滿版出血：兩排要衝出 .aark-wrap 的 1240px。
 * ⚠ 用 100vw 要扣掉捲軸寬，否則右側會多出一條被裁掉的空間、視覺重心偏左。
 *   Kadence 的 scrollbar-offset 腳本會把捲軸寬寫進 --scrollbar-offset。
 */
.wp-block-kadence-rowlayout.aark-cases-row {
	--aark-bleed: calc(100vw - var(--scrollbar-offset, 0px));
	width: var(--aark-bleed);
	max-width: var(--aark-bleed);
	overflow: hidden;
}

/*
 * ⚠ 出血的負外距必須寫在這個特異性、而且要 !important。
 *   style.css 有一條 `.aark-section .aark-wrap > .wp-block-group__inner-container > *
 *   { margin-inline: 0 !important }`(0,3,0)，只寫在 .aark-cases-row 上(0,2,0)會被吃掉，
 *   兩排就會停在 wrap 的 1240px 裡、還往右溢出 100px。
 *   （跟 .aark-wrap 置中、.aark-service-sides 下移是同一類問題：
 *     萬用歸零遇到需要自己 margin 的元素。）
 */
.aark-section .aark-wrap > .wp-block-group__inner-container > .wp-block-kadence-rowlayout.aark-cases-row {
	margin-inline: calc(50% - var(--aark-bleed) / 2) !important;
}

/* 兩排之間的距離，與卡片間距一致 */
.wp-block-kadence-rowlayout.aark-cases-row + .wp-block-kadence-rowlayout.aark-cases-row {
	margin-top: 24px;
}

.wp-block-kadence-rowlayout.aark-cases-row > .kt-row-column-wrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	width: max-content;
	align-items: stretch;
	animation: aark-cases-marquee var(--aark-marquee-dur, 30s) linear infinite;
}

@keyframes aark-cases-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--aark-marquee-shift, -100%), 0, 0); }
}

/* 下排反向：同一組位移量與週期，只把播放方向倒過來 */
.wp-block-kadence-rowlayout.aark-cases-row-alt > .kt-row-column-wrap {
	animation-direction: reverse;
}

/* 卡片是連結，會動的話點不準 —— 滑鼠移上去先停住（只停該排） */
.wp-block-kadence-rowlayout.aark-cases-row:hover > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.aark-cases-row:focus-within > .kt-row-column-wrap {
	animation-play-state: paused;
}

/* ⚠ 尺寸要在這個特異性重申：Kadence 給欄位的規則分數比 .aark-case (0,1,0) 高，
   不重申的話卡片會塌成 0 高度（圖是絕對定位，撐不起容器）。 */
.aark-cases-row .wp-block-kadence-column.aark-case {
	flex: 0 0 464px;
	width: 464px;
	height: 261px;
	min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-kadence-rowlayout.aark-cases-row > .kt-row-column-wrap { animation: none; }
	.wp-block-kadence-rowlayout.aark-cases-row { overflow-x: auto; }
}

@media (max-width: 600px) {
	.aark-cases-row .wp-block-kadence-column.aark-case {
		flex-basis: 300px;
		width: 300px;
		height: 169px;
	}
	.wp-block-kadence-rowlayout.aark-cases-row + .wp-block-kadence-rowlayout.aark-cases-row { margin-top: 16px; }
}
.wp-block-kadence-column.aark-case > .kt-inside-inner-col { display: block; height: 100%; }
.single-content .aark-case figure.wp-block-image { margin: 0; }
.aark-case .kb-section-link-overlay { z-index: 3; }
.single-content .aark-case-copy p { margin: 0; }
.single-content .aark-case-copy h3 { margin: .35rem 0; }
/* 案例跑馬燈後的行動鈕：區塊版是 wp-block-buttons（div），
   只寫 p.aark-cases-foot 吃不到；而且要 (0,3,0) 才蓋得過 Kadence 的
   .single-content .wp-block-buttons 間距。跑馬燈是密集的圖帶，
   靠太近會讓按鈕看起來像黏在圖上。 */
.single-content p.aark-cases-foot,
.single-content .wp-block-buttons.aark-cases-foot { margin: 4rem 0 0; gap: 1.5rem; }

/* --- 6. 方案價目列：原本是 span / b / a，區塊版改成帶 class 的段落 --- */
.single-content .aark-price-intro h2,
.single-content .aark-price-intro p { margin: 0; }
.single-content .aark-price-row h3 { margin: 0; }
.single-content .aark-price-row p { margin: 0; }
.single-content p.aark-price-num { font-family: var(--aark-mono); font-size: .75rem; }
.single-content p.aark-price-fig {
	text-align: right;
	font-family: var(--aark-mono);
	font-size: 1rem;
	font-weight: 700;
}
.single-content p.aark-price-cta { justify-self: end; }

/* --- 7. AI 區：深色濾鏡改用 ::after（原本是一個空的 .aark-ai-veil div） --- */
.aark-ai::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(0, 9, 38, .96) 0%, rgba(0, 9, 38, .90) 42%, rgba(0, 9, 38, .74) 100%);
	pointer-events: none;
}
@media (max-width: 900px) {
	.aark-ai::after {
		background: linear-gradient(180deg, rgba(0, 9, 38, .93) 0%, rgba(0, 9, 38, .90) 100%);
	}
}
.single-content .aark-ai figure.wp-block-image.aark-ai-bg { margin: 0; }
.aark-ai figure.aark-ai-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-content .aark-ai-copy h2 { margin: .9rem 0 1.4rem; }
.single-content .aark-ai-copy p { margin: 0; }
.single-content .aark-ai-points p {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding: .85rem 0;
	display: flex;
	gap: 1rem;
	font-size: .92rem;
	color: rgba(255, 255, 255, .8);
}
.aark-ai-points p b { color: var(--aark-blue); font-family: var(--aark-mono); font-size: .78rem; }
/*
 * ⚠ 間距要寫在 CSS，不能只靠區塊的 blockGap。
 *   Kadence 的 --global-kb-gap 會贏過 wp:buttons 存的 blockGap
 *   （實測填 2.75rem 但前台量到 8.5px）。同樣的處理見上面的
 *   .aark-cases-foot —— 那次也是設了 blockGap 沒有作用。
 */
.aark-ai .wp-block-buttons { margin: 0; gap: 2.25rem; }

/*
 * 雷達：環、十字線、掃描線全部畫在群組本身，三個引擎名稱留成段落（可以改字）。
 * 掃描線用 @property 註冊的角度變數轉 conic-gradient；不支援的瀏覽器會靜止
 * 顯示一道漸層，與 prefers-reduced-motion 的結果相同，不影響閱讀。
 */
@property --aark-rd {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
.wp-block-group.aark-radar {
	background:
		conic-gradient(from var(--aark-rd), rgba(130, 152, 255, .5), rgba(130, 152, 255, 0) 55deg),
		linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 0 50% / 100% 1px no-repeat,
		var(--aark-navy-deep);
	animation: aark-rdsweep 4s linear infinite;
}
@keyframes aark-rdsweep { to { --aark-rd: 360deg; } }
.aark-radar::before,
.aark-radar::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
}
.aark-radar::before { width: 33%; height: 33%; }
.aark-radar::after { width: 66%; height: 66%; }
.single-content .aark-radar p.rd-blip {
	position: absolute;
	margin: 0;
	width: 9px; height: 9px;
	transform: translate(-50%, -50%);
	font-size: 0;
}
.aark-radar p.rd-blip::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	animation: aark-rdpulse 2.4s ease-in-out infinite;
	animation-delay: inherit;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.aark-radar { animation: none; }
	.aark-radar p.rd-blip::before { animation: none; opacity: .8; }
}

/* --- 8. 自研產品列 --- */
.single-content .aark-product-line h3 { margin: 0; }
.single-content .aark-pcard figure.wp-block-image { margin: 0; }
.single-content .aark-pcard .aark-pcard-copy h3 { margin: 0; }
.single-content .aark-pcard .aark-pcard-copy p { margin: .4rem 0 0; }
.single-content .aark-product-line p { margin: 0; }
.single-content .aark-product-line p.pk { font-family: var(--aark-mono); font-size: .75rem; }
.single-content .aark-product-body p { margin: .3rem 0 0; color: var(--aark-slate); font-size: .92rem; }

/* --- 9. 首頁結尾 CTA：按鈕顏色打在裡面的連結上 --- */
.single-content .aark-home-cta h2 { margin: .9rem 0 1rem; }
.single-content .wp-block-buttons.aark-home-cta-actions { margin: 1.9rem 0 0; }
.single-content .aark-home-cta-side p { margin: 0 0 .5rem; }
.single-content .aark-home-cta-side p.aark-home-cta-addr { margin: 1.25rem 0 0; }
.aark-home-cta .wp-block-button.aark-btn-solid .wp-block-button__link {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
	box-shadow: 7px 7px 0 rgba(0, 0, 62, .28);
}
.aark-home-cta .wp-block-button.aark-btn-outline .wp-block-button__link {
	border-color: var(--aark-navy);
	color: var(--aark-navy);
}
.aark-home-cta .wp-block-button.aark-btn-outline .wp-block-button__link:hover,
.aark-home-cta .wp-block-button.aark-btn-outline .wp-block-button__link:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}
.aark-hero-actions .wp-block-button.aark-btn-solid .wp-block-button__link:hover,
.aark-hero-actions .wp-block-button.aark-btn-solid .wp-block-button__link:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* --- 10. 響應式：其餘斷點由 home.css 原本的規則直接生效 --- */
@media (max-width: 960px) {
	/* 案例已改成跑馬燈，卡片尺寸見相容區第 5 節，這裡不要再壓 min-height */
	/* 原版用 span.num / b / a 區分欄位，區塊版全是段落，要把編號跟標題拉回去 */
	.aark-price-row p.aark-price-num { grid-column: 1; }
	.aark-price-row h3 { grid-column: 2; }
	.aark-product-line p:last-child { grid-column: 2; }
}
@media (max-width: 600px) {
	.aark-product-line p:last-child { grid-column: 1; }
	.wp-block-buttons.aark-hero-actions,
	.wp-block-buttons.aark-home-cta-actions { display: grid; }
	.aark-hero-actions .wp-block-button,
	.aark-home-cta-actions .wp-block-button,
	.aark-hero-actions .wp-block-button__link,
	.aark-home-cta-actions .wp-block-button__link { width: 100%; }
}


/* ==========================================================================
   Hero 進場動畫（2026-09-07）

   giginc.co.jp 那種「進站時輕輕動一下」的作法：不是整頁特效，而是把 Hero
   既有的元素按閱讀順序錯開零點幾秒進場。這裡全部用 CSS 動畫，沒有 JS，
   Mark 在 Kadence 後台改文案或換圖都不會壞 —— 動畫綁在既有的 .aark-*
   class 上，新增的區塊只是不參與動畫，不會出錯。

   兩個刻意的限制：
   （1）右側拼貼圖是本頁的 LCP 元素（實測 2.2s）。動它的 opacity 會讓 LCP
        更慢，所以圖片只用 transform 位移／縮放，never opacity。
   （2）位移一律用 translate/rotate/scale 這三個「獨立變形屬性」，不要寫
        transform —— .aark-browser 與 .aark-floating-tag 本身已經有
        transform: rotate(...)，獨立屬性會與它疊加，動畫結束就回到各自原本
        的角度，日後改角度也不必回來同步這裡的 keyframes。

   使用者若在系統開了「減少動態效果」，整組不播（見 media query）。
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@keyframes aark-hero-rise {
		from { opacity: 0; translate: 0 14px; }
		to   { opacity: 1; translate: 0 0; }
	}

	@keyframes aark-hero-frame-in {
		from { translate: 0 26px; rotate: -2.1deg; scale: .985; }
		to   { translate: 0 0; rotate: 0deg; scale: 1; }
	}

	@keyframes aark-hero-ring-in {
		from { opacity: 0; scale: .86; }
		to   { opacity: 1; scale: 1; }
	}

	@keyframes aark-hero-tag-in {
		from { opacity: 0; rotate: 5deg; scale: .9; }
		to   { opacity: 1; rotate: 0deg; scale: 1; }
	}

	/* 文案由上而下依序上浮：眉標 → 標題 → 內文 → 按鈕 → 註記 */
	.aark-hero .aark-eyebrow,
	.aark-hero .aark-hero-title,
	.aark-hero .aark-hero-lede,
	.aark-hero .aark-hero-actions,
	.aark-hero .aark-hero-note {
		animation: aark-hero-rise .58s cubic-bezier(.2, .7, .3, 1) both;
	}

	.aark-hero .aark-eyebrow      { animation-delay: .06s; }
	.aark-hero .aark-hero-title   { animation-delay: .15s; }
	.aark-hero .aark-hero-lede    { animation-delay: .27s; }
	.aark-hero .aark-hero-actions { animation-delay: .37s; }
	.aark-hero .aark-hero-note    { animation-delay: .47s; }

	/* 橘色那行「帶來詢問」是主張，讓它最後落定，多半拍的重音 */
	.aark-hero .aark-hero-title em {
		display: inline-block;
		animation: aark-hero-rise .55s cubic-bezier(.2, .7, .3, 1) .34s both;
	}

	/* 右側：霧藍圓環淡入放大、瀏覽器視窗由下方帶一點傾角落定 */
	.aark-hero-art::before { animation: aark-hero-ring-in 1s cubic-bezier(.2, .7, .3, 1) both; }
	.aark-hero .aark-browser { animation: aark-hero-frame-in .9s cubic-bezier(.2, .7, .3, 1) .05s both; }

	/* 橘色標籤最後彈進來收尾 */
	.aark-hero .aark-floating-tag { animation: aark-hero-tag-in .5s cubic-bezier(.2, 1.25, .5, 1) .72s both; }
}

/* ==========================================================================
   Hero：滿版背景影片版（2026-09-08）

   原本是雙欄（左米白文案／右霧藍區塊放瀏覽器視窗）。改成整區滿版影片、
   文案疊在上面，參考 liginc.co.jp。素材是實拍的辦公室與設計工作場景，
   放進瀏覽器視窗框語意不通（那個框的意思是「這是我們做的網站」），滿版才配得上。

   影片是 Kadence Row Layout 的內建背景影片（`backgroundSettingTab: "video"` 才會
   渲染，少了這個屬性只會出現遮罩層）。它輸出的 <video> 已經帶
   playsinline / muted / loop / autoplay，並自動把 bgImg 當 poster ——
   Mark 之後可以在 Kadence 介面直接換影片、調遮罩顏色與透明度，不必動程式。

   這裡只負責「文字在深色影片上要讀得清楚」：文案改白、橘色改用亮橘
   （--aark-orange-ink 在深底上太暗），外框鈕比照 .aark-phead.has-bg 的既有做法。
   ========================================================================== */

.aark-hero { background: var(--aark-navy); }

.aark-hero-row .kb-blocks-bg-video { object-fit: cover; }

/* 文案原本靠 padding 定位在左欄；現在在 rowlayout 的限寬欄裡，改用 max-width */
.aark-hero-row .aark-hero-copy {
	padding: 0;
	max-width: 42rem;
	color: var(--aark-white);
}

.aark-hero-row .aark-eyebrow { color: var(--aark-blue); }

.aark-hero-row .aark-hero-title {
	color: var(--aark-white);
	text-shadow: 0 2px 26px rgba(0, 0, 30, .5);
}

/* 深底上要用亮橘，不是內文用的 --aark-orange-ink */
.aark-hero-row .aark-hero-title em { color: var(--aark-orange); }

.aark-hero-row .aark-hero-lede {
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 16px rgba(0, 0, 30, .45);
}

/* 外框鈕：沿用 .aark-phead.has-bg 的深底做法 */
.aark-hero-row .wp-block-button.aark-btn-outline .wp-block-button__link {
	color: var(--aark-white);
	border-color: rgba(255, 255, 255, .55);
}

.aark-hero-row .wp-block-button.aark-btn-outline .wp-block-button__link:hover,
.aark-hero-row .wp-block-button.aark-btn-outline .wp-block-button__link:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

/* AI 行銷段也是深底：外框鈕沿用 hero 的白框白字，否則藏青框配藏青字＝隱形。
   深底區段目前有三處（hero、AI、頁尾 CTA），頁尾那塊是橘底所以用藏青版。 */
.aark-ai .wp-block-button.aark-btn-outline .wp-block-button__link {
	color: var(--aark-white);
	border-color: rgba(255, 255, 255, .55);
}

.aark-ai .wp-block-button.aark-btn-outline .wp-block-button__link:hover,
.aark-ai .wp-block-button.aark-btn-outline .wp-block-button__link:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

@media (max-width: 782px) {
	.aark-hero-row .aark-hero-copy { max-width: none; }
}

/*
 * 手機：把影片容器搶回來顯示。
 *
 * Kadence 只要啟用了「行動裝置背景」，就會把 .kb-blocks-bg-video-container
 * 設成 display:none —— 它假設你是想用靜態圖「取代」影片。
 * 但我們要的是相反：借它「手機不預載桌機影片」的副作用，然後換上直式影片。
 * 所以這裡把容器顯示回來；行動背景圖仍然留在底下當封面，影片載入前先看到它。
 *
 * ⚠ 斷點必須是 767，跟 Kadence 行內守衛腳本與 aark-marquee.js 裡的 MOBILE_MAX
 *   完全一致；三者其中一個不同步，就會出現「影片在播但看不到」或「兩支都下載」。
 */
@media (max-width: 767px) {
	.aark-hero .aark-hero-row .kb-blocks-bg-video-container { display: block !important; }
}