/* ===== XIANFENG 現代化首頁 ===== */
:root{
	--xf-red:#ED1C24;
	--xf-red-d:#C41019;
	--xf-ink:#15171a;
	--xf-grey:#6b7076;
	--xf-line:#e6e7e9;
	--xf-soft:#f5f6f7;
}
#wrap{height:auto;}
main{min-height:0;}
#footer{position:static !important;}

.xf-main{
	font-family:Arial,Helvetica,sans-serif;
	color:var(--xf-ink);
	padding-top:80px;
	overflow:hidden;
}
.xf-wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* reveal 動效 */
.xf-rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease;}
.xf-rv.in{opacity:1;transform:none;}
.xf-rv.d1{transition-delay:.1s;}
.xf-rv.d2{transition-delay:.2s;}
.xf-rv.d3{transition-delay:.3s;}

/* 區段標題 */
.xf-head{margin-bottom:46px;}
.xf-head.center{text-align:center;}
.xf-eyebrow{
	display:inline-block;font-size:13px;font-weight:700;letter-spacing:.22em;
	color:var(--xf-red);text-transform:uppercase;margin-bottom:14px;
}
.xf-eyebrow:before{content:"";display:inline-block;width:26px;height:2px;
	background:var(--xf-red);vertical-align:middle;margin-right:10px;margin-bottom:3px;}
.xf-h2{font-size:38px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0;}
.xf-head.center .xf-eyebrow:after{content:"";display:inline-block;width:26px;height:2px;
	background:var(--xf-red);vertical-align:middle;margin-left:10px;margin-bottom:3px;}

/* 按鈕 */
.xf-btn{
	display:inline-block;padding:15px 34px;font-size:14px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
	border:2px solid var(--xf-red);background:var(--xf-red);color:#fff;
	transition:all .25s ease;cursor:pointer;
}
.xf-btn:hover{background:var(--xf-red-d);border-color:var(--xf-red-d);transform:translateY(-2px);}
.xf-btn--ghost{background:transparent;color:var(--xf-ink);border-color:#d0d2d5;}
.xf-btn--ghost:hover{background:var(--xf-ink);border-color:var(--xf-ink);color:#fff;}
.xf-btn--white{background:#fff;color:var(--xf-red);border-color:#fff;}
.xf-btn--white:hover{background:#15171a;border-color:#15171a;color:#fff;}

/* ===== HERO ===== */
.xf-hero{
	position:relative;background:#fff;
	border-bottom:1px solid var(--xf-line);
}
.xf-hero:before{
	content:"XIANFENG";position:absolute;right:-30px;bottom:-34px;
	font-size:200px;font-weight:800;color:#f3f3f4;letter-spacing:-.03em;
	z-index:0;white-space:nowrap;pointer-events:none;
}
.xf-hero-inner{
	position:relative;z-index:1;display:flex;align-items:center;gap:50px;
	min-height:580px;padding:60px 0;
}
.xf-hero-media{flex:1 1 54%;position:relative;}
.xf-hero-media .stage{
	position:relative;background:linear-gradient(160deg,#fafafb 0%,#eef0f2 100%);
	border:1px solid var(--xf-line);padding:40px;
}
.xf-hero-media .stage:before{
	content:"";position:absolute;top:0;left:0;width:64px;height:6px;background:var(--xf-red);
}
.xf-hero-media .stage:after{
	content:"";position:absolute;top:0;left:0;width:6px;height:64px;background:var(--xf-red);
}
.xf-hero-media img{width:100%;height:auto;display:block;
	filter:drop-shadow(0 26px 34px rgba(0,0,0,.22));}
.xf-hero-tag{
	position:absolute;right:24px;bottom:24px;background:var(--xf-red);color:#fff;
	font-size:12px;font-weight:700;letter-spacing:.14em;padding:9px 16px;text-transform:uppercase;
}
.xf-hero-text{flex:1 1 46%;}
.xf-hero-badge{
	display:inline-block;background:var(--xf-red);color:#fff;font-weight:800;
	font-size:20px;letter-spacing:.12em;padding:7px 16px;margin-bottom:22px;
}
.xf-hero-text h1{
	font-size:54px;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 22px;
}
.xf-hero-text p{
	font-size:17px;line-height:1.8;color:var(--xf-grey);margin:0 0 34px;max-width:440px;
}
.xf-hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ===== 分類 ===== */
.xf-section{padding:96px 0;}
.xf-section.soft{background:var(--xf-soft);}
.xf-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.xf-cat{
	position:relative;display:block;text-decoration:none;color:#fff;
	height:300px;overflow:hidden;background:#1a1c20;
}
.xf-cat img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:.62;transition:transform .6s ease,opacity .4s ease;
}
.xf-cat:hover img{transform:scale(1.08);opacity:.45;}
.xf-cat-body{
	position:absolute;left:0;right:0;bottom:0;padding:28px;
	background:linear-gradient(to top,rgba(10,11,13,.92) 0%,rgba(10,11,13,0) 100%);
}
.xf-cat-body h3{font-size:22px;font-weight:800;margin:0 0 6px;}
.xf-cat-body span{font-size:13px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--xf-red);}
.xf-cat-body span:after{content:" \2192";}
.xf-cat:before{content:"";position:absolute;top:0;left:0;width:0;height:5px;
	background:var(--xf-red);z-index:2;transition:width .4s ease;}
.xf-cat:hover:before{width:100%;}

/* ===== 產品 ===== */
.xf-products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.xf-prod{
	display:flex;flex-direction:column;text-decoration:none;color:var(--xf-ink);
	background:#fff;border:1px solid var(--xf-line);transition:all .3s ease;
}
.xf-prod:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,.13);
	border-color:#fff;}
.xf-prod-img{position:relative;background:#fff;padding:24px;border-bottom:1px solid var(--xf-line);}
.xf-prod-img:before{
	content:"";position:absolute;left:0;top:0;width:0;height:4px;
	background:var(--xf-red);transition:width .35s ease;
}
.xf-prod:hover .xf-prod-img:before{width:100%;}
.xf-prod-img img{width:100%;height:200px;object-fit:contain;display:block;}
.xf-prod-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;}
.xf-prod-body h3{font-size:16px;font-weight:700;line-height:1.45;margin:0 0 14px;flex:1;}
.xf-prod-more{font-size:13px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--xf-red);}
.xf-prod-more:after{content:" \2192";transition:margin .25s ease;}
.xf-prod:hover .xf-prod-more:after{margin-left:5px;}
.xf-center-btn{text-align:center;margin-top:54px;}

/* ===== ABOUT ===== */
.xf-about-inner{display:flex;align-items:center;gap:60px;}
.xf-about-media{flex:1 1 46%;position:relative;}
.xf-about-media img{width:100%;height:420px;object-fit:cover;display:block;}
.xf-about-media:after{content:"";position:absolute;right:-18px;bottom:-18px;
	width:140px;height:140px;border:5px solid var(--xf-red);z-index:-1;}
.xf-about-text{flex:1 1 54%;}
.xf-about-text .xf-h2{margin-bottom:22px;}
.xf-about-text p{font-size:16px;line-height:1.9;color:var(--xf-grey);margin:0 0 18px;}
.xf-feats{list-style:none;margin:24px 0 34px;padding:0;
	display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.xf-feats li{font-size:15px;font-weight:600;padding-left:30px;position:relative;}
.xf-feats li:before{
	content:"";position:absolute;left:0;top:2px;width:18px;height:18px;
	background:var(--xf-red);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
	mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
}

/* ===== CTA ===== */
.xf-cta{position:relative;background:var(--xf-red);color:#fff;padding:74px 0;overflow:hidden;}
.xf-cta:before{content:"";position:absolute;top:0;right:0;width:46%;height:100%;
	background:rgba(0,0,0,.08);transform:skewX(-18deg);transform-origin:top;}
.xf-cta-inner{position:relative;z-index:1;display:flex;align-items:center;
	justify-content:space-between;gap:40px;flex-wrap:wrap;}
.xf-cta h2{font-size:34px;font-weight:800;margin:0 0 8px;}
.xf-cta p{margin:0;font-size:16px;opacity:.9;}

/* ===== 響應式 ===== */
@media (max-width:1100px){
	.xf-products{grid-template-columns:repeat(2,1fr);}
	.xf-cats{grid-template-columns:repeat(2,1fr);}
	.xf-h2{font-size:32px;}
	.xf-hero-text h1{font-size:42px;}
}
@media (max-width:960px){
	body{min-width:0;}
	.xf-wrap{padding:0 22px;}
	.xf-hero-inner{flex-direction:column;gap:34px;min-height:0;}
	.xf-hero-media,.xf-hero-text{flex:1 1 100%;width:100%;}
	.xf-hero:before{font-size:110px;bottom:-20px;}
	.xf-cats{grid-template-columns:1fr;}
	.xf-about-inner{flex-direction:column;gap:34px;}
	.xf-about-media,.xf-about-text{width:100%;}
	.xf-section{padding:62px 0;}
	.xf-feats{grid-template-columns:1fr;}
	.xf-cta-inner{flex-direction:column;text-align:center;}
}
@media (max-width:560px){
	.xf-products{grid-template-columns:1fr;}
	.xf-hero-text h1{font-size:34px;}
	.xf-h2{font-size:26px;}
}