@charset "utf-8";
:root{
--primary:#0F4C81;
--design:#1ABC9C;
--cta:#FF6B35;
--bg:#F7F9FB;
--text:#2C3E50;

--primary1:#0F4C81; /* 漸層色 */
--primary2:#1E6FB9;

--design1:#1ABC9C;
--design2:#48E5C2;

--cta1:#FF6B35;
--cta2:#FF8A5C;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Noto Sans TC";}

/* body{background:var(--bg);color:var(--text);} */
body{
	background:linear-gradient(180deg,#F7F9FB,#EEF3F8);
	color:var(--text);
	font-family:"Noto Sans TC";
}



/* header */
header{
position:fixed;
width:100%;
/* background:rgba(15,76,129,.95); */
color:#fff;
z-index:999;

background:linear-gradient(90deg,var(--primary1),var(--primary2));
box-shadow:0 5px 20px rgba(0,0,0,.15);
}

nav{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
padding:16px;
}

nav ul{display:flex;gap:30px;list-style:none;}
nav a{color:#fff;text-decoration:none;}

/* hero */
.hero{
height:100vh;
background:url("https://images.unsplash.com/photo-1581093588401-16f1c6cfa37e?q=80&w=2070") center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.hero::after{
content:"";
position:absolute;
width:100%;height:100%;
/* background:linear-gradient(rgba(15,76,129,.75),rgba(15,76,129,.75)); */

background:linear-gradient(120deg,rgba(15,76,129,.85),rgba(26,188,156,.55));
}

.hero-box{
position:relative;color:#fff;
max-width:800px;
}

.hero h1{font-size:52px;margin-bottom:20px;}

/* CTA 按鈕 */

.cta{
	/* background:var(--cta); */
	padding:18px 45px;
	border-radius:8px;
	display:inline-block;
	margin-top:20px;
	color:#fff;
	text-decoration:none;

	background:linear-gradient(135deg,var(--cta1),var(--cta2));
	box-shadow:0 10px 25px rgba(255,107,53,.4);
	transition:.35s;
}

.cta:hover{
	transform:translateY(-5px) scale(1.02);
	box-shadow:0 25px 50px rgba(255,107,53,.5);
}

/* 卡片 */
.card,.adv div,.step,.calc{
background:linear-gradient(180deg,#ffffff,#f3f7fb);
box-shadow:0 15px 40px rgba(0,0,0,.08);
}


/* 推薦方案 */
.recommend{
border:3px solid;
border-image:linear-gradient(180deg,var(--design1),var(--design2)) 1;
}



/* trust 信任區 */
.trust{
	/* background:#fff; */
	padding:40px;
	display:flex;
	justify-content:center;
	gap:60px;
	flex-wrap:wrap;

	background:linear-gradient(90deg,#ffffff,#f4f8fb);
}

/* section */
.section{
max-width:1200px;
margin:auto;
padding:90px 20px;
}

.title{text-align:center;font-size:32px;margin-bottom:50px;}

/* advantage */
.adv{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.adv div{
background:#fff;
padding:35px;
border-radius:14px;
}

/* process */
.process{
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content:center;
}

.step{
background:#fff;
padding:30px;
width:200px;
text-align:center;
border-radius:12px;
}

/* portfolio */
.slider{
display:flex;
overflow:auto;
gap:20px;
}

/* 作品hover */
.work{
min-width:280px;
height:200px;
background-size:cover;
border-radius:12px;
}

.work::after{
	background:linear-gradient(120deg, rgba(26,188,156,.9),	rgba(72,229,194,.9));
}

/* 報價總金額 */
#total{
	background:linear-gradient(90deg,var(--primary1),var(--primary2));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	font-size:40px;
	font-weight:bold;
}


/* calculator */
.calc{
background:#fff;
padding:40px;
border-radius:14px;
max-width:600px;
margin:auto;
}

.calc input,select{
width:100%;
padding:12px;
margin-bottom:15px;
}

/* seo */

.seo{
max-width:900px;
margin:auto;
text-align:center;
line-height:1.8;
}

/* floating 浮動LINE*/
.line{
	position:fixed;
	right:20px;
	bottom:20px;
	/* background:#06C755; */
	color:#fff;
	padding:18px 25px;
	border-radius:50px;

	background:linear-gradient(135deg,#06C755,#2BE27A);
	box-shadow:0 15px 35px rgba(0,0,0,.25);
}

/* footer */
footer{
	/* background:var(--primary); */
	color:#fff;
	padding:60px;
	margin-top:80px;

	background:linear-gradient(120deg,#0B3A63,#0F4C81);
}

.footer-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:40px;
}