/*
 * Meta 廣告落地頁(html/web/talkmate888.php)
 * 兩張 Figma 設計稿各自以 --u 等比縮放:桌機 1536x1024、手機 430x931。
 * 所有座標都是設計稿上的像素值,寫成 calc(N * var(--u)),視窗剛好是設計尺寸時 1u = 1px。
 */
:root {
	--u: calc(min(100vw, 1536px) / 1536);
	--font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

@media (max-width: 1023.98px) {
	:root {
		--u: calc(min(100vw, 430px) / 430);
	}
}

html {
	background: #101014;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #101014;
	color: #FAF6FA;
	font-family: var(--font);
}

img {
	display: block;
}

.lp {
	position: relative;
	width: calc(1536 * var(--u));
	height: calc(1024 * var(--u));
	margin: 0 auto;
	overflow: hidden;
}

.lp>*,
.lp .tile,
.lp .card>* {
	position: absolute;
}

.lp h1,
.lp h2,
.lp h3,
.lp p,
.lp ul {
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

/* ---------- 品牌列 ---------- */
.brand {
	left: calc(93 * var(--u));
	top: calc(46 * var(--u));
	height: calc(40 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
}

.brand .brand-logo {
	position: static;
	display: flex;
	align-items: center;
}

.brand-icon {
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
}

.brand-word {
	width: calc(71.2 * var(--u));
	height: calc(28.08 * var(--u));
}

.brand .brand-tag {
	position: static;
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

/* ---------- 主視覺:四張照片(桌機)---------- */
.tile {
	border-radius: calc(17.935 * var(--u));
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tile-lt {
	left: calc(173.55 * var(--u));
	top: calc(122.08 * var(--u));
	width: calc(263.57 * var(--u));
	height: calc(242.14 * var(--u));
	transform: rotate(6deg);
	background-image: url(/html/img/talkmate888/tile_lt.jpg);
}

.tile-rt {
	left: calc(1094.37 * var(--u));
	top: calc(121.64 * var(--u));
	width: calc(297.51 * var(--u));
	height: calc(155.16 * var(--u));
	transform: rotate(5deg);
	background-image: url(/html/img/talkmate888/tile_rt.jpg);
}

.tile-lb {
	left: calc(146.07 * var(--u));
	top: calc(344.36 * var(--u));
	width: calc(340.53 * var(--u));
	height: calc(174.88 * var(--u));
	transform: rotate(-4deg);
	background-image: url(/html/img/talkmate888/tile_lb.jpg);
}

.tile-rb {
	left: calc(1178.95 * var(--u));
	top: calc(284.72 * var(--u));
	width: calc(236.9 * var(--u));
	height: calc(243.9 * var(--u));
	transform: rotate(-5deg);
	background-image: url(/html/img/talkmate888/tile_rb.jpg);
}

.heart {
	left: calc(450.35 * var(--u));
	top: calc(216.58 * var(--u));
	width: calc(37 * var(--u));
	height: calc(37 * var(--u));
}

/* ---------- 主視覺:中央 logo 與主標 ---------- */
.hero-logo {
	left: calc(726.75 * var(--u));
	top: calc(125.11 * var(--u));
	width: calc(127.34 * var(--u));
	height: calc(156.04 * var(--u));
}

.hero-logo img {
	position: absolute;
}

.hero-icon {
	left: calc(13.45 * var(--u));
	top: 0;
	width: calc(100.44 * var(--u));
	height: calc(100.44 * var(--u));
}

.hero-word {
	left: 0;
	top: calc(105.82 * var(--u));
	width: calc(127.34 * var(--u));
	height: calc(50.22 * var(--u));
}

.lp .hero-title {
	left: calc(490.42 * var(--u));
	top: calc(288.91 * var(--u));
	width: calc(600 * var(--u));
	text-align: center;
	font-weight: 900;
}

.hero-title span {
	display: block;
	font-size: calc(86.09 * var(--u));
	line-height: 1.25;
}

.hero-title .t1 {
	color: #FAF6FA;
}

.hero-title .t2 {
	margin-top: calc(10.76 * var(--u));
	background: linear-gradient(180deg, #FFF1F8 0%, #F16BAD 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- 功能介紹 ---------- */
.lp .feat-title {
	left: 0;
	top: calc(555 * var(--u));
	width: calc(1536 * var(--u));
	text-align: center;
	font-size: calc(30 * var(--u));
}

.lp .cards {
	left: calc(93 * var(--u));
	top: calc(616.5 * var(--u));
	display: flex;
	gap: calc(28 * var(--u));
	list-style: none;
}

.card {
	position: relative;
	width: calc(431 * var(--u));
	height: calc(205 * var(--u));
	box-sizing: border-box;
	background: #15151C;
	border-radius: calc(18 * var(--u));
	box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) #3E3D49;
}

.card-icon {
	left: calc(32 * var(--u));
	top: calc(27 * var(--u));
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
}

.lp .card h3 {
	left: calc(32 * var(--u));
	top: calc(95 * var(--u));
	font-size: calc(30 * var(--u));
}

.lp .card p {
	left: calc(32 * var(--u));
	top: calc(144.5 * var(--u));
	font-size: calc(21 * var(--u));
	font-weight: 400;
	color: #B8B6C2;
}

/* ---------- 品牌結語與跑馬燈(桌機)---------- */
.lp .tagline {
	left: 0;
	top: calc(841 * var(--u));
	width: calc(1536 * var(--u));
	height: calc(102 * var(--u));
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(12 * var(--u));
	font-size: calc(30 * var(--u));
}

.tagline em {
	font-style: normal;
	color: #F35CAA;
}

.rule {
	flex: none;
	width: calc(148 * var(--u));
	height: calc(2.2 * var(--u));
}

.rule-l {
	background: linear-gradient(90deg, rgba(252, 110, 136, 0) 0%, rgba(252, 110, 136, .8) 53%);
}

.rule-r {
	background: linear-gradient(90deg, rgba(252, 110, 136, .8) 47%, rgba(252, 110, 136, 0) 100%);
}

.lp .marquee {
	left: 0;
	top: calc(969 * var(--u));
	width: calc(1536 * var(--u));
	text-align: center;
	font-size: calc(14 * var(--u));
	font-weight: 400;
	color: #B8B6C2;
}

/* ---------- 「開始約會」按鈕:固定在視窗底部,水平位置跟著設計稿置中 ---------- */
.cta-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(72 * var(--u));
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.cta-in {
	position: relative;
	width: calc(1536 * var(--u));
	height: calc(60 * var(--u));
}

.cta {
	position: absolute;
	right: calc(78.8 * var(--u));
	top: 0;
	width: calc(223.2 * var(--u));
	height: calc(60 * var(--u));
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(13.2 * var(--u));
	background: #F35CAA;
	border-radius: calc(30 * var(--u));
	color: #FAF6FA;
	text-decoration: none;
	font-family: "PingFang TC", var(--font);
	font-size: calc(19.2 * var(--u));
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.cta img {
	width: calc(21.33 * var(--u));
	height: calc(19.2 * var(--u));
}

.cta:focus-visible {
	outline: 2px solid #FAF6FA;
	outline-offset: 3px;
}

/* ====================== 手機版(430x931)====================== */
@media (max-width: 1023.98px) {
	.lp {
		width: calc(430 * var(--u));
		height: calc(931 * var(--u));
	}

	.tile-rt,
	.tile-lb,
	.heart,
	.lp .tagline,
	.lp .marquee {
		display: none;
	}

	.brand {
		left: calc(26 * var(--u));
		top: calc(24 * var(--u));
		height: calc(25.53 * var(--u));
		gap: calc(7.66 * var(--u));
	}

	.brand-icon {
		width: calc(17.87 * var(--u));
		height: calc(17.87 * var(--u));
	}

	.brand-word {
		width: calc(45.44 * var(--u));
		height: calc(17.92 * var(--u));
	}

	.brand .brand-tag {
		font-size: calc(14.04 * var(--u));
	}

	.tile-lt {
		left: calc(64.78 * var(--u));
		top: calc(339.41 * var(--u));
		width: calc(146.48 * var(--u));
		height: calc(134.57 * var(--u));
		transform: rotate(10deg);
	}

	.tile-rb {
		left: calc(207.77 * var(--u));
		top: calc(304.61 * var(--u));
		width: calc(158.74 * var(--u));
		height: calc(163.43 * var(--u));
		transform: rotate(-5deg);
	}

	.hero-logo {
		left: calc(181.25 * var(--u));
		top: calc(84 * var(--u));
		width: calc(67.49 * var(--u));
		height: calc(82.7 * var(--u));
	}

	.hero-icon {
		left: calc(7.13 * var(--u));
		width: calc(53.23 * var(--u));
		height: calc(53.23 * var(--u));
	}

	.hero-word {
		top: calc(56.08 * var(--u));
		width: calc(67.49 * var(--u));
		height: calc(26.62 * var(--u));
	}

	/* 標題框寬度不能超出 430u,否則手機瀏覽器會把 layout viewport 撐大,fixed 的按鈕就跑出畫面 */
	.lp .hero-title {
		left: 0;
		top: calc(193 * var(--u));
		width: calc(430 * var(--u));
	}

	.hero-title .t1 {
		font-size: calc(43 * var(--u));
	}

	.hero-title .t2 {
		margin-top: calc(.25 * var(--u));
		font-size: calc(41 * var(--u));
	}

	.lp .feat-title {
		top: calc(503 * var(--u));
		width: calc(430 * var(--u));
		font-size: calc(18 * var(--u));
	}

	.lp .cards {
		left: calc(24 * var(--u));
		top: calc(548 * var(--u));
		flex-direction: column;
		gap: calc(10 * var(--u));
	}

	.card {
		width: calc(382 * var(--u));
		height: calc(82 * var(--u));
		border-radius: calc(15 * var(--u));
	}

	.card-icon {
		left: calc(16 * var(--u));
		top: calc(19 * var(--u));
		width: calc(42.56 * var(--u));
		height: calc(42.56 * var(--u));
	}

	.lp .card h3 {
		left: calc(72 * var(--u));
		top: calc(15 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(22 * var(--u));
	}

	.lp .card p {
		left: calc(72 * var(--u));
		top: calc(44 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(16 * var(--u));
		color: #B8B5C2;
	}

	.cta-wrap {
		bottom: calc(32 * var(--u));
	}

	.cta-in {
		width: calc(430 * var(--u));
		height: calc(59 * var(--u));
	}

	.cta {
		right: auto;
		left: calc(24 * var(--u));
		width: calc(382 * var(--u));
		height: calc(59 * var(--u));
		gap: calc(15.18 * var(--u));
		font-size: calc(22.08 * var(--u));
	}

	.cta img {
		width: calc(24.53 * var(--u));
		height: calc(22.08 * var(--u));
	}
}