@charset "UTF-8";
/* Hettich 海蒂詩 著陸頁樣式(功能初版,沿用全站主色 #E88100 / 青 #5AB3A9 / 基準 1rem=10px)
   全部 scope 在 .hettich 底下,不影響其他頁面。 */

.hettich{ overflow-x: hidden; }
.hettich section{ position: relative; }

/* 共用按鈕 */
.hettich .btn-primary,
.hettich .btn-outline{
	display: inline-block;
	font-size: 1.9rem;
	line-height: 1;
	padding: 1.6rem 3.4rem;
	border-radius: .8rem;
	text-align: center;
	cursor: pointer;
	transition: all .2s ease-in-out;
}
.hettich .btn-primary{ background: #E88100; color: #fff; border: 1px solid #E88100; }
.hettich .btn-primary:hover{ background: #cf7300; border-color: #cf7300; }
.hettich .btn-outline{ background: transparent; color: #E88100; border: 1px solid #E88100; }
.hettich .btn-outline:hover{ background: #E88100; color: #fff; }

/* Section 01｜Hero */
.hettich-hero{ padding: 9rem 0 7rem; text-align: center; }
.hettich-hero h1{ margin-bottom: 3.5rem; color: #000000; }
.hettich-hero p{
	max-width: 92rem;
	margin: 0 auto 4rem;
	font-size: 1.9rem;
	line-height: 2;
	color: #5E5A5A;
	text-align: left;
}
.hettich-hero-cta{ display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }

/* Section 02｜產品一覽 CTA(產品卡片本身沿用 index.css 的 .products 樣式) */
.hettich .products{ padding-bottom: 2rem; }
.hettich .products .swiper-list{ margin-bottom: 3rem; }
.hettich-products-cta{ text-align: center; margin-top: 3rem; }

/* Section 03｜認識 Hettich */
.hettich-about{ padding: 5rem 0; }
.hettich-about-con{ max-width: 104rem; }
.hettich-about-con p{ font-size: 1.8rem; line-height: 2; color: #5E5A5A; margin-bottom: 1.8rem; }
.hettich-about-con p:last-child{ margin-bottom: 0; }

/* Section 04｜為什麼選擇 Hettich */
.hettich-why{ padding: 5rem 0; }
.hettich-why-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	margin-top: 1rem;
}
.hettich-why-list li{
	background: #faf8f5;
	border-radius: 1.2rem;
	padding: 3.4rem 2.6rem;
}
.hettich-why-list .num{
	display: block;
	font-family: Inter, sans-serif;
	font-size: 4.6rem;
	font-weight: 700;
	color: #E88100;
	line-height: 1;
	margin-bottom: 1.6rem;
}
.hettich-why-list h3{ font-size: 2.2rem; color: #000; margin-bottom: 1.4rem; font-weight: 500; }
.hettich-why-list p{ font-size: 1.6rem; line-height: 1.85; color: #5E5A5A; }

/* Section 05｜為什麼選擇智珣 */
.hettich-zhixun{ padding: 5rem 0; }
.hettich-zhixun-lead{
	font-size: 2rem;
	line-height: 1.9;
	color: #333;
	text-align: center;
	margin-bottom: 1.4rem;
}
.hettich-zhixun-list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem 5rem;
	margin-top: 4.5rem;
}
.hettich-zhixun-list h3{ font-size: 2.3rem; color: #E88100; margin-bottom: 1.2rem; font-weight: 500; }
.hettich-zhixun-list p{ font-size: 1.7rem; line-height: 1.9; color: #5E5A5A; }

/* Section 06｜CTA band */
.hettich-cta-band{ padding: 7rem 0; margin-top: 5rem; background: #2b2b2b; text-align: center; }
.hettich-cta-band h2{ font-size: 3.4rem; color: #fff; margin-bottom: 1.8rem; font-weight: 500; }
.hettich-cta-band p{ font-size: 1.8rem; color: #cfcfcf; margin-bottom: 3.2rem; line-height: 1.8; }
.hettich-cta-band-btns{ display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.hettich-cta-band .btn-outline{ color: #fff; border-color: #fff; }
.hettich-cta-band .btn-outline:hover{ background: #fff; color: #2b2b2b; }

/* Section 07｜常見問題 */
.hettich-faq{ padding: 5rem 0 8rem; }
.hettich-faq-list{ max-width: 112rem; margin: 0 auto; }
.hettich-faq-list li{
	border: 1px solid #e6e1d9;
	border-radius: 1.2rem;
	padding: 2.8rem 3.2rem;
	margin-bottom: 1.8rem;
}
.hettich-faq-list li:last-child{ margin-bottom: 0; }
.hettich-faq-list h3{
	font-size: 2.1rem;
	color: #000;
	font-weight: 500;
	margin-bottom: 1.4rem;
	padding-left: 1.8rem;
	border-left: .4rem solid #E88100;
	line-height: 1.3;
}
.hettich-faq-list .faq-a{ font-size: 1.7rem; line-height: 1.95; color: #5E5A5A; }

/* ===== 平板 ===== */
@media (max-width: 1024px){
	.hettich-why-list{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== 手機(rem 由 vw 縮放,需放大字級並疊成單欄) ===== */
@media (max-width: 767px){
	.hettich-hero{ padding: 5rem 0 4rem; }
	.hettich-hero p{ font-size: 2.8rem; margin-bottom: 3.5rem; }
	.hettich-hero-cta,
	.hettich-cta-band-btns{ gap: 1.4rem; }
	.hettich .btn-primary,
	.hettich .btn-outline{ font-size: 2.8rem; padding: 1.8rem 3.6rem; }

	.hettich-about-con p{ font-size: 2.7rem; }
	.hettich-why-list{ grid-template-columns: 1fr; gap: 2.4rem; }
	.hettich-why-list .num{ font-size: 6rem; }
	.hettich-why-list h3{ font-size: 3.2rem; }
	.hettich-why-list p{ font-size: 2.6rem; }

	.hettich-zhixun-lead{ font-size: 3rem; }
	.hettich-zhixun-list{ grid-template-columns: 1fr; gap: 3rem; }
	.hettich-zhixun-list h3{ font-size: 3.3rem; }
	.hettich-zhixun-list p{ font-size: 2.7rem; }

	.hettich-cta-band h2{ font-size: 4.4rem; }
	.hettich-cta-band p{ font-size: 2.7rem; }

	.hettich-faq-list h3{ font-size: 3rem; }
	.hettich-faq-list .faq-a{ font-size: 2.6rem; }
}