/*
 * 首頁動畫版面樣式 (Nexus Digital 品牌動畫首頁)
 * 所有樣式都包在 .nexus_home_page 底下，避免影響共用的 site_header / site_footer
 */
/* DM Sans / Manrope 字型改為本機載入 (可變字重字型，單一檔案涵蓋整個字重範圍) */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dm-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 首頁為獨立版面 (不套用共用 Header/Footer)，重置瀏覽器預設的 body 邊距，避免滿版區塊四周露出白邊 */
html, body { margin: 0; min-height: 100%; }

/* 視覺隱藏但螢幕閱讀器/搜尋引擎可讀取的文字 (用於補上 SEO 用 h1，不影響動畫版面視覺) */
.visually_hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nexus_home_page { font-family: 'DM Sans', sans-serif; color: #dff8f5; background: #f7fafa; overflow-x: hidden; }
.nexus_home_page, .nexus_home_page * { box-sizing: border-box; }

/* Scene 01 — white logo portal */
.simple-hero-scroll {
	position: relative;
	height: 480vh;
	background: #071112;
}

.simple-hero-stage {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

.white-logo-scene,
.pcb-next-scene {
	position: absolute;
	inset: 0;
}

.white-logo-scene {
	z-index: 2;
	display: grid;
	place-items: center;
	background: #fff;
	will-change: opacity;
}

.white-logo-scene > .nexus-n-symbol {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(180px, 21vw, 320px);
	height: auto;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	shape-rendering: geometricPrecision;
	text-rendering: geometricPrecision;
}

.simple-scroll-cue {
	position: absolute;
	right: clamp(22px, 3vw, 54px);
	bottom: clamp(22px, 4vh, 44px);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 13px 15px 13px 22px;
	border: 1px solid rgba(5, 111, 111, .2);
	border-radius: 999px;
	color: rgba(5, 58, 59, .82);
	background: rgba(247, 253, 252, .82);
	box-shadow: 0 14px 38px rgba(4, 72, 72, .1), 0 0 0 0 rgba(34, 188, 177, .16);
	font: 600 11px/1 'Manrope', sans-serif;
	letter-spacing: .26em;
	backdrop-filter: blur(12px);
	animation: scroll-cue-attention 2.2s ease-in-out infinite;
}

.simple-scroll-cue i {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 50%;
	background: #087f7b;
	box-shadow: 0 8px 20px rgba(8, 127, 123, .28);
}

.simple-scroll-cue i::before,
.simple-scroll-cue i::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.simple-scroll-cue i::before {
	top: 9px;
	width: 1.5px;
	height: 17px;
	background: #d9fffb;
	animation: scroll-line 1.45s ease-in-out infinite;
}

.simple-scroll-cue i::after {
	top: 21px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid #d9fffb;
	border-bottom: 1.5px solid #d9fffb;
	transform: translateX(-50%) rotate(45deg);
	animation: scroll-arrow 1.45s ease-in-out infinite;
}

@keyframes scroll-cue-attention {
	0%, 100% { transform: translateY(0); box-shadow: 0 14px 38px rgba(4, 72, 72, .1), 0 0 0 0 rgba(34, 188, 177, .15); }
	50% { transform: translateY(-7px); box-shadow: 0 18px 46px rgba(4, 72, 72, .16), 0 0 0 9px rgba(34, 188, 177, 0); }
}

@keyframes scroll-line {
	0% { opacity: 0; transform: translate(-50%, -9px) scaleY(.25); }
	35% { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
	100% { opacity: 0; transform: translate(-50%, 11px) scaleY(.45); }
}

@keyframes scroll-arrow {
	0%, 20% { opacity: 0; translate: 0 -5px; }
	50% { opacity: 1; }
	100% { opacity: 0; translate: 0 8px; }
}

.pcb-next-scene {
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	background: #061011;
	transform: scale(1.04);
	will-change: opacity, transform;
}

.pcb-next-bg,
.pcb-next-shade {
	position: absolute;
	inset: 0;
}

.pcb-next-bg {
	background: url('../images/nexus-circuit-bg.png') center/cover no-repeat;
	image-rendering: auto;
}

.pcb-next-shade {
	background:
		radial-gradient(circle at center, rgba(0, 24, 25, .04), rgba(0, 8, 9, .45)),
		linear-gradient(180deg, rgba(0, 8, 9, .12), rgba(0, 8, 9, .5));
}

.next-scene-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #eafffc;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	filter: blur(10px);
	z-index: 4;
}

.service-paths,
.service-items {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.service-paths {
	z-index: 1;
	overflow: visible;
}

.service-path-base,
.service-path-active {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.service-path-base {
	stroke: transparent;
	stroke-width: 0;
	opacity: 0;
}

.service-path-active {
	stroke: #39cbbb;
	stroke-width: 2.6;
	opacity: 0;
	filter: url('#service-glow');
}

.service-pulse {
	opacity: 0;
	filter: url('#service-glow');
}

.service-pulse-image {
	pointer-events: none;
}

.service-items {
	z-index: 3;
	pointer-events: none;
}

.service-item {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 168px;
	color: rgba(227, 255, 251, .92);
	font: 400 18px/1 'Manrope', sans-serif;
	letter-spacing: .12em;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.88);
	transform-origin: center;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
}

.service-item::after {
	content: '';
	position: absolute;
	left: -12px;
	top: -10px;
	width: 1px;
	height: 34px;
	background: linear-gradient(#43cbbb, rgba(67, 203, 187, .08));
}

.service-item i {
	position: absolute;
	left: -16px;
	top: -14px;
	width: 9px;
	height: 9px;
	border: 1px solid #76e1d5;
	border-radius: 50%;
	background: #0b4448;
	box-shadow: 0 0 12px rgba(57, 203, 187, .7);
}

.service-item span {
	color: rgba(135, 207, 199, .68);
	font-size: 9px;
	letter-spacing: .24em;
}

.service-web { left: 13%; top: 20%; }
.service-saas { left: 42%; top: 12%; }
.service-system { left: 81.5%; top: 21.5%; }
.service-security { left: 89%; top: 49%; }
.service-marketing { left: 77%; top: 80%; }
.service-commerce { left: 23%; top: 80%; }
.service-api { left: 10.5%; top: 50%; }
.service-uiux { left: 62%; top: 12%; }

.network-core-mark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(310px, 34vw, 590px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(48, 213, 194, .16), rgba(16, 125, 124, .035) 38%, transparent 69%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.next-scene-content span {
	margin-bottom: 18px;
	color: rgba(182, 237, 230, .7);
	font: 500 8px/1 'Manrope', sans-serif;
	letter-spacing: .4em;
}

.next-scene-content h2 {
	margin: 0;
	font: 300 clamp(40px, 7vw, 96px)/.95 'Manrope', sans-serif;
	letter-spacing: -.055em;
}

.next-scene-content p {
	margin: 18px 0 0;
	color: #70bbb4;
	font: 400 13px/1 'Manrope', sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.network-subtitle {
	margin-top: 22px;
	padding: 9px 18px;
	color: rgba(220, 247, 243, .82);
	font: 400 clamp(12px, 1vw, 17px)/1.5 'Manrope', sans-serif;
	letter-spacing: .08em;
	border: 1px solid rgba(77, 217, 202, .14);
	border-radius: 999px;
	background: rgba(2, 19, 22, .52);
	box-shadow: 0 8px 34px rgba(0, 0, 0, .22), inset 0 0 24px rgba(35, 204, 187, .035);
	backdrop-filter: blur(5px);
}

/* 首次進站的捲動引導提示 (等待逾時未捲動才顯示) */
.intro-scroll-prompt {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: grid;
	place-items: center;
	color: #f7ffff;
	background: rgba(30, 37, 39, .62);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.intro-scroll-prompt__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-shadow: 0 3px 24px rgba(0, 0, 0, .4);
}

.intro-scroll-prompt__content > span {
	margin-bottom: 15px;
	color: #75e3d7;
	font: 600 clamp(10px, .75vw, 14px)/1 'Manrope', sans-serif;
	letter-spacing: .42em;
}

.intro-scroll-prompt__content > strong {
	font: 400 clamp(26px, 3.1vw, 56px)/1.25 'Manrope', sans-serif;
	letter-spacing: -.03em;
}

.intro-scroll-prompt__content > i {
	position: relative;
	width: 42px;
	height: 68px;
	margin-top: 32px;
	border: 2px solid rgba(213, 255, 250, .82);
	border-radius: 24px;
	box-shadow: 0 0 30px rgba(63, 222, 207, .2);
}

.intro-scroll-prompt__content > i::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -25px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #75e3d7;
	border-bottom: 2px solid #75e3d7;
	transform: translateX(-50%) rotate(45deg);
}

.intro-scroll-prompt__content > i b {
	position: absolute;
	left: 50%;
	top: 12px;
	width: 5px;
	height: 12px;
	border-radius: 99px;
	background: #75e3d7;
	transform: translateX(-50%);
	animation: intro-scroll-wheel 1.35s ease-in-out infinite;
}

@keyframes intro-scroll-wheel {
	0% { opacity: 0; translate: 0 -3px; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; translate: 0 21px; }
}

@media (max-width: 700px) {
	.simple-hero-scroll { height: 440vh; }
	.white-logo-scene > .nexus-n-symbol { width: min(58vw, 270px); }
	.simple-scroll-cue { right: 18px; bottom: 20px; padding: 10px 11px 10px 17px; font-size: 9px; }
	.simple-scroll-cue i { width: 36px; height: 36px; }
	.network-subtitle { width: min(82vw, 420px); margin-top: 16px; padding: 8px 12px; font-size: 11px; letter-spacing: .04em; }
	.service-item { min-width: 110px; font-size: 12px; }
	.service-item span { font-size: 6px; }
	.service-saas { left: 39%; top: 14%; }
	.service-system { left: 79%; top: 23%; }
	.service-security { left: 86%; }
	.service-marketing { left: 74%; top: 78%; }
	.service-commerce { left: 22%; top: 78%; }
	.service-uiux { left: 61%; top: 14%; }
}

@media (prefers-reduced-motion: reduce) {
	.simple-hero-scroll { height: 100vh; }
	.next-scene-content { opacity: 1; transform: none; filter: none; }
	.simple-scroll-cue,
	.simple-scroll-cue i::before,
	.simple-scroll-cue i::after { animation: none; }
	.intro-scroll-prompt { display: none; }
}

/* Scene 02 — synchronized device showcase */
.device-showcase-scroll {
	position: relative;
	height: 470vh;
	background: #020405;
}

.device-showcase-stage {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 45%, rgba(20, 73, 72, .15), transparent 42%),
		#020405;
	isolation: isolate;
}

.showcase-whiteout {
	position: absolute;
	z-index: 3;
	inset: 0;
	background: #f7fafa;
	opacity: 0;
	pointer-events: none;
}

.device-stack-anchor {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.device-stack {
	flex: 0 0 auto;
	position: relative;
	width: min(112vw, 2160px);
	aspect-ratio: 2072 / 1004;
	transform-origin: center;
	will-change: transform, opacity;
}

.device-screen-art {
	position: absolute;
	z-index: 1;
	inset: 3.6% 2.3% 3.9%;
	overflow: hidden;
	border-radius: 8.5% / 17%;
	background:
		linear-gradient(90deg, rgba(0, 6, 7, .1), transparent 35% 65%, rgba(0, 6, 7, .16)),
		url('../images/phone-bg.png') center/cover no-repeat;
}

.device-frame {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.showcase-eyebrow {
	position: absolute;
	z-index: 4;
	left: 32px;
	top: 28px;
	color: rgba(172, 220, 214, .5);
	font: 500 8px/1 'Manrope', sans-serif;
	letter-spacing: .3em;
}

.showcase-eyebrow span {
	margin-right: 12px;
	color: #71d7cc;
}

.showcase-copy {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 7vh;
	width: min(84vw, 900px);
	color: #eafffc;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 24px);
	filter: blur(10px);
}

.showcase-copy span {
	color: #62bcb4;
	font: 500 8px/1 'Manrope', sans-serif;
	letter-spacing: .38em;
}

.showcase-copy h2 {
	margin: 14px 0 0;
	font: 300 clamp(28px, 4vw, 58px)/1.16 'Manrope', sans-serif;
	letter-spacing: -.04em;
}

/* Scene 02 finale — service/category bento */
.showcase-bento {
	position: absolute;
	z-index: 7;
	inset: 0;
	display: grid;
	grid-template-columns: 1.2fr .9fr 1fr 1fr .9fr 1.15fr;
	grid-template-rows: 1fr .85fr .85fr 1fr;
	gap: clamp(8px, .75vw, 15px);
	padding: clamp(18px, 3.2vh, 38px) clamp(18px, 2.5vw, 48px);
	color: #eafffc;
	background:
		radial-gradient(circle at 50% 51%, rgba(16, 201, 181, .13), transparent 34%),
		linear-gradient(135deg, #010506 0%, #061013 46%, #020708 100%);
	opacity: 0;
	perspective: 1400px;
	overflow: hidden;
}

.bento-tile {
	position: relative;
	min-width: 0;
	min-height: 0;
	padding: clamp(12px, 1.25vw, 24px);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	border: 1px solid rgba(75, 225, 210, .2);
	border-radius: clamp(12px, 1.15vw, 22px);
	background:
		linear-gradient(145deg, rgba(10, 27, 31, .96), rgba(3, 11, 14, .94));
	box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 16px 42px rgba(0, 0, 0, .3);
	transform-style: preserve-3d;
	will-change: transform, opacity, filter;
	transition: transform .45s cubic-bezier(.2,.75,.2,1), border-color .35s ease, box-shadow .35s ease;
}

.bento-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 20%, rgba(98, 255, 233, .09) 48%, transparent 72%);
	translate: -120% 0;
	transition: translate .7s ease;
}

a.bento-tile:hover {
	z-index: 4;
	transform: translateY(-7px) scale(1.018);
	border-color: rgba(83, 255, 230, .72);
	box-shadow: 0 22px 60px rgba(0, 211, 190, .2), inset 0 0 28px rgba(26, 216, 195, .08);
}

a.bento-tile:hover::after { translate: 120% 0; }

.bento-tile em {
	display: block;
	margin-bottom: 5px;
	color: #3de4d4;
	font: 600 clamp(9px, .72vw, 14px)/1.2 'Manrope', sans-serif;
	letter-spacing: .08em;
	font-style: normal;
}

.bento-tile b {
	display: block;
	font: 500 clamp(16px, 1.25vw, 25px)/1.25 'Manrope', sans-serif;
}

.bento-brand { grid-column: 1 / 3; grid-row: 1; }
.bento-commerce { grid-column: 3 / 5; grid-row: 1; }
.bento-custom { grid-column: 5; grid-row: 1; }
.bento-mobile { grid-column: 6; grid-row: 1 / 3; }
.bento-member { grid-column: 1; grid-row: 2; }
.bento-erp { grid-column: 2; grid-row: 2 / 4; }
.bento-hero { grid-column: 3 / 5; grid-row: 2 / 4; }
.bento-list { grid-column: 5; grid-row: 2 / 4; }
.bento-crm { grid-column: 1; grid-row: 3 / 5; }
.bento-analytics { grid-column: 2 / 4; grid-row: 4; }
.bento-integration { grid-column: 4 / 6; grid-row: 4; }
.bento-tags { grid-column: 6; grid-row: 3 / 5; }

.bento-case { padding: 0; }
.bento-case img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .72;
	filter: saturate(.8) brightness(.72);
	transition: transform .65s ease, opacity .4s ease, filter .4s ease;
}
.bento-case:hover img { transform: scale(1.06); opacity: .9; filter: saturate(1) brightness(.86); }
.bento-case > span {
	position: absolute;
	z-index: 2;
	inset: auto 0 0;
	padding: 28px 18px 14px;
	background: linear-gradient(transparent, rgba(1, 8, 10, .94));
}
.bento-case span i,
.bento-mini > i,
.bento-stat > i,
.bento-crm > i {
	display: block;
	margin-top: 5px;
	color: rgba(191, 224, 220, .58);
	font: 500 clamp(8px, .62vw, 12px)/1.35 'Manrope', sans-serif;
	letter-spacing: .04em;
	font-style: normal;
}

.bento-mini {
	background:
		radial-gradient(circle at 82% 76%, rgba(0, 210, 191, .2), transparent 40%),
		linear-gradient(145deg, #0a1b20, #040b0e);
}
.bento-mini::before {
	content: '';
	position: absolute;
	right: 13%;
	bottom: 12%;
	width: 42%;
	aspect-ratio: 1;
	border: 1px solid rgba(66, 240, 219, .35);
	border-radius: 24%;
	rotate: 12deg;
	box-shadow: 0 0 28px rgba(31, 220, 200, .14), inset 0 0 18px rgba(31, 220, 200, .1);
}

.bento-custom { padding: 0; }
.bento-custom::before {
	z-index: 1;
	inset: 0;
	width: auto;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	rotate: 0deg;
	background: linear-gradient(180deg, rgba(1, 10, 12, .08) 18%, rgba(1, 10, 12, .92) 100%);
	box-shadow: none;
}
.bento-custom-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.82) saturate(.9);
	transition: transform .65s ease, filter .4s ease;
}
.bento-custom-copy {
	position: absolute;
	z-index: 2;
	left: clamp(12px, 1.25vw, 24px);
	right: clamp(12px, 1.25vw, 24px);
	bottom: clamp(12px, 1.1vw, 21px);
}
.bento-custom-copy > i {
	display: block;
	margin-top: 5px;
	color: rgba(191, 224, 220, .7);
	font: 500 clamp(8px, .62vw, 12px)/1.35 'Manrope', sans-serif;
	letter-spacing: .04em;
	font-style: normal;
}
.bento-custom:hover .bento-custom-art {
	transform: scale(1.07);
	filter: brightness(.95) saturate(1.08);
}

.bento-image-card { padding: 0; }
.bento-image-card::before {
	z-index: 1;
	inset: 0;
	width: auto;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	rotate: 0deg;
	background: linear-gradient(180deg, rgba(1, 10, 12, .04) 20%, rgba(1, 10, 12, .94) 100%);
	box-shadow: none;
}
.bento-card-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(.78) saturate(.9);
	transition: transform .65s ease, filter .4s ease;
}
.bento-crm-art {
	object-fit: contain;
	object-position: center 44%;
	padding: 8% 3% 2%;
}
.bento-card-copy {
	position: absolute;
	z-index: 2;
	left: clamp(12px, 1.25vw, 24px);
	right: clamp(12px, 1.25vw, 24px);
	bottom: clamp(12px, 1.1vw, 21px);
}
.bento-card-copy > i {
	display: block;
	margin-top: 5px;
	color: rgba(191, 224, 220, .7);
	font: 500 clamp(8px, .62vw, 12px)/1.35 'Manrope', sans-serif;
	letter-spacing: .04em;
	font-style: normal;
}
.bento-image-card:hover .bento-card-art {
	transform: scale(1.07);
	filter: brightness(.94) saturate(1.06);
}
.bento-erp .bento-card-copy {
	top: 18%;
	bottom: auto;
}

.bento-phone {
	position: absolute;
	left: 50%;
	bottom: 12%;
	width: 46%;
	aspect-ratio: .54;
	display: grid;
	place-items: center;
	color: #4de9db;
	font: 600 10px/1 'Manrope', sans-serif;
	border: 2px solid rgba(91, 233, 220, .42);
	border-radius: 18px;
	rotate: 12deg;
	background: linear-gradient(155deg, rgba(17, 65, 72, .78), rgba(0, 8, 10, .96));
	box-shadow: 0 20px 36px rgba(0, 0, 0, .5), 0 0 32px rgba(21, 220, 201, .12);
}

.bento-stat strong {
	display: block;
	margin-top: clamp(12px, 2vh, 26px);
	font: 400 clamp(22px, 2vw, 40px)/1 'Manrope', sans-serif;
}
.bento-stat { background: radial-gradient(circle at 70% 80%, rgba(9, 210, 188, .16), transparent 45%), #061014; }

.bento-stack > span {
	position: absolute;
	left: 15%; right: 15%; bottom: 10%; top: 28%;
}
.bento-stack > span i {
	position: absolute;
	left: 13%;
	width: 74%;
	height: 24%;
	border: 1px solid rgba(64, 244, 224, .52);
	background: rgba(7, 60, 65, .55);
	box-shadow: 0 0 24px rgba(21, 221, 201, .12);
	transform: rotate(30deg) skew(-25deg);
}
.bento-stack > span i:nth-child(1) { bottom: 9%; }
.bento-stack > span i:nth-child(2) { bottom: 27%; }
.bento-stack > span i:nth-child(3) { bottom: 45%; }
.bento-stack > span i:nth-child(4) { bottom: 63%; background: rgba(29, 202, 187, .35); }

.bento-hero {
	display: grid;
	place-content: center;
	text-align: center;
	background:
		radial-gradient(circle at 72% 22%, rgba(116, 255, 225, .56), transparent 31%),
		linear-gradient(135deg, #093f5b 0%, #078e99 42%, #20c695 100%);
	border-color: rgba(188, 255, 244, .42);
	box-shadow: 0 25px 80px rgba(0, 195, 172, .24), inset 0 0 60px rgba(255, 255, 255, .09);
}
.bento-hero span {
	color: rgba(225, 255, 249, .74);
	font: 600 clamp(7px, .55vw, 10px)/1 'Manrope', sans-serif;
	letter-spacing: .24em;
}
.bento-hero h2 {
	position: relative;
	z-index: 1;
	margin: clamp(12px, 2vh, 24px) 0 0;
	font: 300 clamp(30px, 3.65vw, 70px)/1.28 'Manrope', sans-serif;
	letter-spacing: -.045em;
	text-shadow: 0 8px 32px rgba(0, 45, 47, .3);
}
.bento-hero > i {
	position: absolute;
	width: 180px;
	aspect-ratio: 1;
	right: -45px;
	bottom: -75px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.02);
}

.bento-list { display: flex; flex-direction: column; gap: 8px; }
.bento-list > span {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1;
	padding: 0 10px;
	border: 1px solid rgba(72, 219, 205, .12);
	border-radius: 9px;
	background: rgba(43, 89, 92, .16);
	color: rgba(222, 246, 243, .76);
	font-size: clamp(10px, .82vw, 15px);
}
.bento-list > span i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #25d6c5; box-shadow: 0 0 9px #25d6c5; }

.crm-funnel {
	display: block;
	width: 70%;
	height: 48%;
	margin: 12% auto 0;
	clip-path: polygon(0 0, 100% 0, 64% 34%, 64% 60%, 54% 70%, 54% 100%, 46% 100%, 46% 70%, 36% 60%, 36% 34%);
	background: linear-gradient(#22d8ca, #075267);
	filter: drop-shadow(0 0 18px rgba(28, 222, 207, .25));
}

.bento-analytics > span {
	position: absolute;
	display: flex;
	align-items: end;
	gap: 7%;
	right: 8%; bottom: 16%;
	width: 48%; height: 52%;
	border-bottom: 1px solid rgba(98, 224, 213, .26);
}
.bento-analytics > span i { flex: 1; background: linear-gradient(#31e8d7, #087c92); box-shadow: 0 0 14px rgba(30, 219, 202, .17); }

.bento-integration > span:not(.bento-card-copy) {
	position: absolute;
	right: 7%; bottom: 14%;
	display: flex;
	align-items: center;
	gap: 12px;
}
.bento-integration > span:not(.bento-card-copy)::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 10%; right: 10%; top: 50%;
	height: 1px;
	background: #23d9c8;
}
.bento-integration > span:not(.bento-card-copy) i {
	display: grid;
	place-items: center;
	width: clamp(30px, 3vw, 48px);
	aspect-ratio: 1;
	border: 1px solid rgba(58, 231, 214, .5);
	border-radius: 50%;
	background: #07171b;
	color: #73eee2;
	font: 600 clamp(7px, .58vw, 10px)/1 'Manrope', sans-serif;
	font-style: normal;
}

.bento-tags > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(5px, .55vh, 9px);
	margin-top: 12px;
}
.bento-tags > div span {
	display: flex;
	align-items: center;
	min-height: clamp(24px, 3.2vh, 36px);
	padding: 0 7px;
	color: rgba(224, 247, 244, .82);
	font-size: clamp(8px, .65vw, 12px);
	white-space: nowrap;
	border: 1px solid rgba(61, 224, 209, .17);
	border-radius: 8px;
	background: rgba(23, 62, 66, .35);
}
.bento-tags > div span::before {
	content: '';
	width: 5px;
	aspect-ratio: 1;
	margin-right: 6px;
	border-radius: 50%;
	background: #30dcca;
	box-shadow: 0 0 7px #30dcca;
}

@media (max-width: 700px) {
	.device-showcase-scroll { height: 460vh; }
	.device-stack { width: 165vw; }
	.showcase-eyebrow { left: 20px; top: 22px; }
	.showcase-copy { top: 7vh; }
	.showcase-bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		gap: 6px;
		padding: 58px 9px 9px;
	}
	.bento-tile { grid-column: auto; grid-row: auto; padding: 9px; border-radius: 11px; }
	.bento-tile em { font-size: 6px; }
	.bento-tile b { font-size: 10px; }
	.bento-case > span { padding: 20px 9px 7px; }
	.bento-case span i, .bento-mini > i, .bento-stat > i, .bento-crm > i { display: none; }
	.bento-hero { grid-column: 1 / 3; grid-row: 3; }
	.bento-hero h2 { margin-top: 5px; font-size: 25px; }
	.bento-brand { grid-column: 1; grid-row: 1; }
	.bento-commerce { grid-column: 2; grid-row: 1; }
	.bento-custom { grid-column: 1; grid-row: 2; }
	.bento-mobile { grid-column: 2; grid-row: 2; }
	.bento-member { grid-column: 1; grid-row: 4; }
	.bento-erp { grid-column: 2; grid-row: 4; }
	.bento-crm { grid-column: 1; grid-row: 5; }
	.bento-analytics { grid-column: 2; grid-row: 5; }
	.bento-integration { grid-column: 1; grid-row: 6; }
	.bento-tags { grid-column: 2; grid-row: 6; }
	.bento-list { display: none; }
	.bento-tags > div { grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 4px; }
	.bento-tags > div span { min-height: 13px; padding: 0 3px; font-size: 4px; }
	.bento-tags > div span:nth-child(n+9) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.device-showcase-scroll { height: 100vh; }
	.device-stack, .showcase-copy, .showcase-eyebrow { opacity: 0; }
	.showcase-whiteout { opacity: 1; }
	.showcase-bento, .bento-tile { opacity: 1; transform: none; filter: none; }
}

/* Scene 03 — 專案流程場景 (Canvas 301 張影格序列 + 捲動階段文字) */
.project-process-scroll {
	position: relative;
	z-index: 2;
	margin-top: -100vh;
	height: 600vh;
	color: #eafffc;
	background: transparent;
}

.project-process-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	overflow: hidden;
	isolation: isolate;
	background: transparent;
}

.process-sequence-visual {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.process-sequence-canvas {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
}

.process-sequence-shade {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 8, 10, .55), transparent 32%, transparent 68%, rgba(0, 8, 10, .55)),
		linear-gradient(180deg, rgba(0, 8, 10, .18), transparent 28%, transparent 68%, rgba(0, 8, 10, .5));
}

.process-content-layer {
	position: absolute;
	z-index: 12;
	inset: 0;
	pointer-events: none;
}

.process-stage {
	position: absolute;
	top: 50%;
	width: min(38vw, 560px);
	opacity: 0;
	transform: translateY(-50%);
	text-shadow: 0 3px 24px rgba(0, 8, 10, .9);
}
.process-stage--left { left: clamp(32px, 7vw, 140px); }
.process-stage--right { right: clamp(32px, 7vw, 140px); }
.process-stage--center { left: 50%; text-align: center; transform: translate(-50%, -50%); }
.process-stage__index { margin-bottom: 18px; color: #5de4d5; font: 600 10px/1 'Manrope', sans-serif; letter-spacing: .32em; }
.process-stage h2 { margin: 0; font: 300 clamp(38px, 5vw, 78px)/1.08 'Manrope', sans-serif; letter-spacing: -.045em; }
.process-stage h2 span { display: block; }
.process-stage p { max-width: 520px; margin: 24px auto 0; color: rgba(218, 245, 241, .72); font: 400 clamp(13px, 1.05vw, 17px)/1.9 'Manrope', sans-serif; letter-spacing: .035em; }
.process-stage small { display: block; margin-top: 44px; color: rgba(111, 225, 214, .56); font: 600 8px/1 'Manrope', sans-serif; letter-spacing: .38em; }

.process-debug { position: absolute; z-index: 30; left: 16px; bottom: 16px; padding: 9px 12px; color: #8ff9ec; background: #001114; font: 11px/1.4 monospace; }
.process-reduced-list { display: none; }

.project-process-sequence .process-content-layer { z-index: 3; }
.project-process-sequence .process-stage--left,
.project-process-sequence .process-stage--right {
	padding: clamp(22px, 2vw, 36px);
	border: 1px solid rgba(80, 222, 208, .12);
	background: linear-gradient(135deg, rgba(1, 17, 21, .68), rgba(3, 29, 33, .32));
	box-shadow: 0 24px 80px rgba(0, 7, 9, .26);
	backdrop-filter: blur(12px);
}
.project-process-sequence .process-stage--center {
	width: min(88vw, 1120px);
	padding: clamp(28px, 4vw, 54px) clamp(34px, 6vw, 90px);
	border: 1px solid rgba(80, 222, 208, .1);
	border-radius: 24px;
	background: radial-gradient(ellipse at center, rgba(0, 9, 12, .82), rgba(0, 9, 12, .64) 58%, rgba(0, 9, 12, .25) 82%, transparent 100%);
	box-shadow: 0 28px 90px rgba(0, 5, 7, .38);
	backdrop-filter: blur(8px);
}
.project-process-sequence .process-stage--center h2 { white-space: nowrap; font-size: clamp(38px, 4.8vw, 76px); }
.project-process-sequence .process-stage--center p { color: rgba(231, 250, 247, .84); }

@media (max-width: 1023px) {
	.project-process-scroll { height: 520vh; }
	.process-stage { width: min(48vw, 480px); }
}

@media (max-width: 700px) {
	.project-process-scroll { height: 440vh; }
	.project-process-stage { min-height: 560px; }
	.process-stage { top: auto; left: 22px; right: 22px; bottom: 8vh; width: auto; text-align: left; transform: none; }
	.process-stage--center { left: 22px; transform: none; text-align: left; }
	.process-stage h2 { font-size: clamp(32px, 11vw, 52px); }
	.process-stage p { margin-left: 0; font-size: 12px; line-height: 1.7; }
	.process-sequence-canvas { object-fit: cover; }
	.project-process-sequence .process-stage { padding: 20px; border: 1px solid rgba(80, 222, 208, .12); background: rgba(1, 17, 21, .62); backdrop-filter: blur(10px); }
	.project-process-sequence .process-stage--center h2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.project-process-scroll { height: auto; margin-top: 0; }
	.project-process-stage { height: 100vh; min-height: 600px; }
	.project-process-stage > .process-content-layer { display: none; }
	.process-reduced-list { display: block; position: relative; background: #031014; }
	.process-reduced-list .process-content-layer { position: relative; display: grid; gap: 1px; padding: 1px 0; }
	.process-reduced-list .process-stage { position: relative; inset: auto; width: auto; min-height: 58vh; padding: 14vh 8vw; opacity: 1; transform: none; filter: none; text-align: left; background: rgba(8, 38, 43, .58); }
	.process-reduced-list .process-stage p { margin-left: 0; }
	.process-sequence-canvas { display: none; }
	.project-process-sequence .project-process-stage { background: linear-gradient(rgba(1, 10, 13, .3), rgba(1, 10, 13, .62)), url('images/scene-04/video_frames_30fps/frame_000301.jpg') center/cover no-repeat; }
}

/* Scene 04 — 聯絡表單場景 */
.contact-scene {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 12vh clamp(24px, 7vw, 140px) 42px;
	color: #eafffc;
	background:
		radial-gradient(circle at 50% 44%, rgba(19, 147, 139, .2), transparent 32%),
		linear-gradient(145deg, #02090c 0%, #06171b 48%, #02080a 100%);
	isolation: isolate;
}

.contact-scene__grid {
	position: absolute;
	z-index: -2;
	inset: -20%;
	opacity: .2;
	background-image:
		linear-gradient(rgba(45, 212, 191, .14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(45, 212, 191, .14) 1px, transparent 1px);
	background-size: 72px 72px;
	transform: perspective(700px) rotateX(64deg) translateY(27%);
	transform-origin: center bottom;
	-webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 68%);
	mask-image: radial-gradient(ellipse at center, #000, transparent 68%);
	animation: contact-grid-flow 14s linear infinite;
}

.contact-transition__wash {
	position: absolute;
	z-index: 20;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at center, #eafffa 0%, #fff 44%, #f8fcfb 100%);
	clip-path: circle(0% at 50% 50%);
}

.contact-transition__flare {
	position: absolute;
	z-index: 21;
	left: 50%;
	top: 50%;
	width: min(18vw, 260px);
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: 0;
	translate: -50% -50%;
	pointer-events: none;
	background: radial-gradient(circle, #fff 0 18%, rgba(102, 244, 226, .94) 24%, rgba(45, 212, 191, .3) 48%, transparent 72%);
	box-shadow: 0 0 65px rgba(45, 212, 191, .55), 0 0 150px rgba(45, 212, 191, .24);
}

.contact-scene__layout {
	width: min(100%, 1240px);
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	align-items: center;
	gap: clamp(48px, 7vw, 110px);
}
.contact-scene__copy { text-align: left; }
.contact-scene__eyebrow { display: block; margin-bottom: 28px; color: #59d8ca; font: 600 9px/1 'Manrope', sans-serif; letter-spacing: .38em; }
.contact-scene h2 { margin: 0; font: 300 clamp(44px, 5.4vw, 86px)/1.08 'Manrope', sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.contact-scene__copy > p { max-width: 480px; margin: 30px 0 0; color: rgba(210, 241, 236, .7); font: 400 clamp(13px, 1.05vw, 17px)/1.85 'Manrope', sans-serif; }
.contact-scene__direct { display: inline-flex; align-items: center; gap: 12px; margin-top: 35px; padding-bottom: 7px; color: #79e9dd; border-bottom: 1px solid rgba(89, 216, 202, .32); text-decoration: none; font: 500 12px/1 'Manrope', sans-serif; letter-spacing: .08em; }
.contact-scene__direct i { font-style: normal; }

.contact-form { display: grid; gap: 20px; padding: clamp(24px, 3vw, 42px); border: 1px solid rgba(79, 220, 206, .16); border-radius: 26px; background: linear-gradient(145deg, rgba(8, 35, 40, .82), rgba(2, 17, 21, .76)); box-shadow: 0 30px 90px rgba(0, 5, 7, .34); backdrop-filter: blur(18px); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 9px; color: rgba(190, 231, 225, .7); font: 600 8px/1 'Manrope', sans-serif; letter-spacing: .18em; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; color: #eafffc; border: 1px solid rgba(81, 203, 192, .17); border-radius: 12px; outline: 0; background: rgba(1, 13, 16, .62); padding: 14px 15px; font: 400 13px/1.45 'Manrope', sans-serif; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form select { color-scheme: dark; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(177, 213, 208, .34); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(73, 236, 219, .7); background: rgba(3, 25, 29, .88); box-shadow: 0 0 0 3px rgba(45, 212, 191, .08); }
.contact-form__recaptcha { display: flex; justify-content: flex-start; }
@media (max-width: 340px) {
	.contact-form__recaptcha { transform: scale(.92); transform-origin: 0 0; }
}

.contact-form__submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.contact-form__submit small { color: rgba(167, 211, 205, .46); font: 400 9px/1.5 'Manrope', sans-serif; }
.contact-form button { display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 24px; border: 0; border-radius: 999px; color: #04383a; background: #dffffa; cursor: pointer; font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .1em; }
.contact-form button i { display: grid; place-items: center; width: 39px; aspect-ratio: 1; border-radius: 50%; color: #effffd; background: #078c86; font: 17px/1 sans-serif; font-style: normal; }

.contact-scene__footer { position: absolute; left: clamp(24px, 4vw, 72px); right: clamp(24px, 4vw, 72px); bottom: 30px; display: flex; justify-content: space-between; color: rgba(166, 218, 211, .45); font: 600 8px/1 'Manrope', sans-serif; letter-spacing: .32em; }

@keyframes contact-grid-flow { to { background-position: 0 72px, 72px 0; } }

@media (max-width: 700px) {
	.contact-scene { min-height: 100svh; padding-inline: 22px; }
	.contact-scene h2 { font-size: clamp(42px, 12vw, 62px); }
	.contact-scene__footer { flex-direction: column; gap: 9px; }
	.contact-scene__layout { grid-template-columns: 1fr; gap: 38px; padding-bottom: 80px; }
	.contact-form__row { grid-template-columns: 1fr; }
	.contact-form__submit { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-scene__grid { animation: none; }
}

/* 浮動聯絡按鈕 (固定在畫面右下角，點擊捲動到聯絡表單) */
.floating-contact {
	position: fixed;
	z-index: 100;
	right: clamp(16px, 2.2vw, 34px);
	bottom: clamp(16px, 2.6vh, 28px);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 7px 7px 7px 20px;
	color: #073c3d;
	border: 1px solid rgba(7, 116, 111, .16);
	border-radius: 999px;
	background: rgba(232, 255, 251, .92);
	box-shadow: 0 14px 42px rgba(0, 11, 13, .2);
	backdrop-filter: blur(12px);
	text-decoration: none;
	font: 600 10px/1 'Manrope', sans-serif;
	letter-spacing: .13em;
	transition: transform .28s ease, box-shadow .28s ease;
}
.floating-contact i { display: grid; place-items: center; width: 38px; aspect-ratio: 1; color: #eafffc; border-radius: 50%; background: #078c86; font: 16px/1 sans-serif; font-style: normal; }
.floating-contact:hover { transform: translateY(-4px); box-shadow: 0 18px 52px rgba(0, 11, 13, .3), 0 0 0 5px rgba(45, 212, 191, .08); }
@media (max-width: 700px) {
	.floating-contact { right: 12px; bottom: 12px; }
}

/* 共用元件：logo 雨滴粒子背景 (Scene 01 白色 Logo 場景 / Scene 05 回到起點場景皆使用) */
.logo-rain {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
}
.logo-rain i {
	position: absolute;
	left: var(--rain-left);
	top: calc(-1 * var(--rain-length) - 12vh);
	width: 1.5px;
	height: var(--rain-length);
	border-radius: 999px;
	opacity: var(--rain-opacity);
	background: linear-gradient(to bottom, transparent, #063846 18%, #008f8d 58%, #20c69f);
	box-shadow: 0 0 7px rgba(0, 157, 157, .28);
	transform: translate3d(0, -12vh, 0);
	animation: logo-rain-fall var(--rain-duration) linear var(--rain-delay) infinite;
	will-change: transform;
}
.logo-rain i:nth-child(3n) { width: 2px; filter: blur(.2px); }
.logo-rain i:nth-child(4n) { width: 1px; }
@keyframes logo-rain-fall {
	to { transform: translate3d(0, 125vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-rain { display: none; }
}

/* Scene 05 — 回到起點場景 (Logo 縮放回到最初的白色場景，形成循環) */
.loop-back-scroll { position: relative; z-index: 3; height: 240vh; background: #fff; }
.loop-back-stage { position: relative; width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; background: #fff; isolation: isolate; }
.loop-back-logo { position: relative; z-index: 3; width: clamp(180px, 21vw, 320px); height: auto; transform-origin: center; filter: drop-shadow(0 12px 36px rgba(0, 112, 111, .08)); }
.loop-back__copy { position: absolute; z-index: 4; left: 50%; bottom: clamp(38px, 7vh, 76px); translate: -50% 0; display: grid; gap: 10px; text-align: center; color: #075557; }
.loop-back__copy span { font: 600 9px/1 'Manrope', sans-serif; letter-spacing: .38em; }
.loop-back__copy small { color: rgba(7, 85, 87, .56); font: 500 10px/1 'Manrope', sans-serif; letter-spacing: .14em; }
.loop-back-stage .logo-rain { z-index: 2; }

@media (max-width: 700px) {
	.loop-back-scroll { height: 210vh; }
	.loop-back-logo { width: min(58vw, 270px); }
}

@media (prefers-reduced-motion: reduce) {
	.loop-back-scroll { height: 100vh; margin-top: 0; background: #fff; }
	.loop-back-stage { background: #fff; }
	.loop-back-logo { transform: none; opacity: 1; }
	.loop-back__copy { opacity: 1; filter: none; }
}