:root{
	interpolate-size: allow-keywords;
	--color-primary: #26E;
	--color-primary-dark: #14B;
	--color-dark: #025;
	--color-text: #124;
	--color-text-secondary: #468;
	--color-muted: #679;
	--color-white: #FFF;
	--color-bg-light: #DDE;
	--color-bg-blue: #DEF;
	--color-border: #EEE;
	--color-border-light: #DEE;
	--color-icon-bg: #EFF;
	--color-footer: #012;
	--color-footer-text: #BCD;
	--color-footer-muted: #89B;
	--color-green: #2A4;
	--color-red: #C14;
}
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body{
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Microsoft YaHei",
		sans-serif;
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.6;
}
button,
input,
select,
textarea,
pre{
	font-family: inherit;
}
.container{
	max-width: 1200px;
	margin: auto;
	padding: 0 24px;
}
a{
	text-decoration: none;
}
header nav a{
	color: var(--color-text-secondary);
	font-size: 15px;
	font-weight: 600;
}
header nav a:hover{
	color: var(--color-primary);
}
main a{
	color: var(--color-primary);
	font-weight: 600;
}
img{
	max-width: 100%;
}
header{
	position: sticky;
	top: 0;
	height: 76px;
	z-index: 99;
	background: var(--color-white);
	border-bottom: 2px solid var(--color-border);
}
.navbar{
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-between;
}
.logo{
	display: flex;
	align-items: center;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-dark);
}
.logo img{
	height: 64px;
	width: auto;
	margin-inline-end: 10px;
}
.logo span{
	color: var(--color-primary);
}
header nav{
	display: flex;
	gap: 50px;
	align-items: center;
}
.menu-toggle{
	display:none;
	background:none;
	border:0;
	font-size:28px;
	cursor:pointer;
	color: var(--color-primary);
}
.menu-toggle:hover{
	color: var(--color-primary);
}
.hero{
	padding: 100px 0;
	background: radial-gradient(circle at top right, var(--color-bg-blue), transparent 35%), linear-gradient(180deg, var(--color-white), var(--color-bg-light));
	min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.hero video{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0.2;
	transform:scale(1.05);
}
.hero-content{
	z-index: 2;
	text-align: center;
}
.hero h1{
	font-size: 52px;
	line-height: 1.2;
	margin-bottom: 25px;
	color: var(--color-dark);
}
.hero h1 span{
	color: var(--color-primary);
}
.hero p{
	font-size: 18px;
	color: var(--color-muted);
	margin-bottom: 35px;
}
.hero-right{
	position: relative;
}
.business-box{
	background: var(--color-white);
	border-radius: 25px;
	padding: 35px;
	box-shadow: 0 25px 60px rgba(15,45,92,.12);
}
.business-box h3{
	margin-bottom: 25px;
	font-size: 22px;
}
.business-item{
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 0;
	border-bottom: 1px solid var(--color-border);
}
.business-item:last-child{
	border-bottom: none;
}
.circle{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--color-icon-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.center{
	text-align: center;
}
section{
	padding: 90px 0;
}
section h2{
	text-align: center;
	font-size: 38px;
	margin-bottom: 15px;
	color: var(--color-text);
}
.section-desc{
	text-align: center;
	color: var(--color-muted);
	margin-bottom: 45px;
}
.card-grid{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
}
.card{
	background: var(--color-white);
	padding: 32px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
	transition: .3s;
}
.card:hover{
	transform: translateY(-8px);
}
.card .icon{
	font-size: 38px;
	margin-bottom: 20px;
}
.card h3{
	margin-bottom: 15px;
	color: var(--color-text);
}
.card p{
	color: var(--color-muted);
	line-height: 1.8;
}
.advantage{
	background: radial-gradient(circle at top right, var(--color-bg-blue), transparent 35%), linear-gradient(180deg, var(--color-white), var(--color-bg-light));
}
.feature-grid{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
	margin-bottom: 50px;
}
.feature{
	background: var(--color-white);
	padding: 35px 20px;
	text-align: center;
	border-radius: 18px;
}
.feature strong{
	display: block;
	font-size: 40px;
	color: var(--color-primary);
}
.feature span{
	color: var(--color-muted);
}
.text-grid{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.text-grid div{
	background: var(--color-white);
	padding: 30px;
	border-radius: 18px;
}
.steps{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
}
.step{
	text-align: center;
}
.number{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: auto auto 20px;
}
.step p{
	color: var(--color-muted);
}
.states{
	background: radial-gradient(circle at top right, var(--color-bg-blue), transparent 35%), linear-gradient(180deg, var(--color-white), var(--color-bg-light));
}
.state-grid{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 25px;
}
.state-card{
	background: var(--color-white);
	padding: 35px;
	border-radius: 20px;
}
.state-card p{
	font-weight: 600;
	margin: 18px 0;
}
.state-card ul{
	list-style: none;
}
.state-card li::before{
	content: "✓";
	color: var(--color-green);
	font-weight: bold;
	margin-right: 8px;
}
.tag{
	display: inline-block;
	padding: 6px 12px;
	background: var(--color-icon-bg);
	color: var(--color-primary);
	border-radius: 20px;
	font-size: 14px;
	margin: 10px 0;
}
.state-card ul{
	padding-inline-start: 20px;
	line-height: 2;
}
.faq-list{
	max-width: 850px;
	margin: auto;
}
details{
	background: var(--color-white);
	padding: 0;
	margin-bottom: 15px;
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0,0,0,.05);
}
details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.3s ease;
}
details[open]::details-content {
	block-size: auto;
}
summary{
	padding: 30px;
	cursor: pointer;
	font-weight: 600;
	color: var(--color-text);
}
details p{
	padding: 0 30px 30px 30px;
	color: var(--color-muted);
	line-height: 1.8;
}
.cta{
	background: var(--color-dark);
	color: var(--color-white);
	text-align: center;
	padding: 90px 0;
}
.cta h2{
	font-size: 40px;
	margin-bottom: 20px;
	color: var(--color-white);
}
.cta p{
	opacity: .85;
}
.cta-buttons{
	margin-top: 35px;
}
footer{
	background: var(--color-footer);
	color: var(--color-white);
	padding: 30px 30px 5px 30px;
}

.footer-main, .footer-bottom {
	max-width: 1200px;
	margin: 10px auto;
}
.footer-main {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo {
	font-size: 22px;
	font-weight: 700;
	display: flex;
    align-items: center;
}

.footer-logo img {
	height: 30px;
	width: auto;
	margin-right: 10px;
}

.footer-main p {
	margin: 10px 0;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.65);
}

.footer-bottom {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	gap: 24px;
}

.footer-legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	transition: color 0.2s ease;
}

.footer-legal a:hover {
	color: #fff;
}

.footer-copyright {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	white-space: nowrap;
}

.btn, button{
	display: inline-block;
	padding: 15px 35px;
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 30px;
	font-weight: 600;
	text-decoration: none;
	margin: 8px;
	transition: .3s;
}
.btn:hover, button:hover{
	transform: translateY(-2px);
}
.btn-light{
	background: var(--color-white) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border-light) !important;
}
.btn-transparent{
	background: transparent !important;
	color: var(--color-white) !important;
	border: 1px solid var(--color-white) !important;
}
.page-title{
	font-size: 48px;
	margin-bottom: 20px;
	color: var(--color-dark);
}
.page-subtitle{
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 18px;
	color: var(--color-muted);
}
.lead{
	font-size: 18px;
	line-height: 1.9;
	color: var(--color-muted);
	max-width: 820px;
	margin-bottom: 40px;
}
.grid-2{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 40px;
}
.grid-3{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.grid-4{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 24px;
}
.split{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.content-box{
	padding: 35px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 20px;
}
.content-box h3{
	margin-bottom: 15px;
}
.content-box p:last-child{
	margin-bottom: 0;
}
.badge{
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--color-icon-bg);
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 600;
}
.divider{
	height: 1px;
	background: var(--color-border);
	margin: 50px 0;
}
.list{
	padding-inline-start: 24px;
	line-height: 1.9;
}
.list li{
	margin-bottom: 8px;
}
.check-list{
	padding-inline-start: 24px;
	line-height: 2;
}
.check-list li{
	margin-bottom: 8px;
}
.timeline{
	max-width: 500px;
	margin: auto;
	list-style: none;
	counter-reset: step;
}
.timeline li{
	position: relative;
	padding-inline-start: 70px;
	padding-bottom: 40px;
}
.timeline li::before{
	counter-increment: step;
	content: counter(step);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.timeline li::after{
	content: "";
	position: absolute;
	inset-inline-start: 20px;
	top: 42px;
	bottom: 0;
	width: 2px;
	background: var(--color-border);
}
.timeline li:last-child::after{
	display: none;
}
.timeline h3{
	margin-bottom: 10px;
}
.timeline p{
	color: var(--color-muted);
}
.table-wrap{
	overflow-x: auto;
}
table{
	width: 100%;
	border-collapse: collapse;
}
th,
td{
	padding: 16px;
	text-align: start;
	border: 1px solid var(--color-border);
}
th{
	background: var(--color-bg-light);
	font-weight: 600;
}
.form{
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.form label{
	font-weight: 600;
}
.form input,
.form select,
.form textarea{
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-border-light);
	border-radius: 10px;
	background: var(--color-white);
	font: inherit;
}
.form textarea{
	min-height: 140px;
	resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus{
	outline: none;
	border-color: var(--color-primary);
}
.alert{
	padding: 18px 22px;
	background: var(--color-bg-blue);
	border-inline-start: 4px solid var(--color-primary);
	border-radius: 10px;
}
figure{
	margin: 40px 0;
}
figure img{
	display: block;
	width: 100%;
	border-radius: 18px;
}
video{
	display: block;
	width: 100%;
	border-radius: 18px;
}
iframe{
	width: 100%;
	border: 0;
	border-radius: 18px;
}
.scroll-x{
	overflow-x: auto;
}
.text-center{
	text-align: center;
}
.text-start{
	text-align: start;
}
.text-end{
	text-align: end;
}
/*----------------------------------------*/
.page-hero{
	padding:90px 0;
	background:
		linear-gradient(135deg,var(--color-dark),var(--color-primary));
	text-align:center;
	color:var(--color-white);
	background-size:200% 200%;
	animation:bgMove 5s ease infinite;
}
.page-hero .page-title{
	color:var(--color-white);
	font-size:48px;
	margin-bottom:20px;
}
.page-hero .lead{
	color:rgba(255,255,255,.85);
	max-width:700px;
	margin:auto;
}
@keyframes bgMove{
	0%{
		background-position:0% 50%;
	}
	50%{
		background-position:100% 50%;
	}
	100%{
		background-position:0% 50%;
	}
}

.service-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:25px;
}
.service-card{
	background:var(--color-white);
	padding:32px;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
	transition:.3s;
}
.service-card:hover{
	transform:translateY(-6px);
}
.service-card h3{
	margin-bottom:12px;
	color:var(--color-text);
}
.service-card p{
	color:var(--color-muted);
	line-height:1.8;
	margin-bottom:18px;
}
.service-card a{
	color:var(--color-primary);
	font-weight:600;
}
.service-hero{
	padding:90px 0;
	background:
		radial-gradient(circle at top right,var(--color-bg-blue),transparent 40%),
		linear-gradient(180deg,var(--color-white),var(--color-bg-light));
}
.service-hero h1{
	font-size:46px;
	line-height:1.3;
	color:var(--color-dark);
	margin-bottom:20px;
}
.service-hero .lead{
	max-width:800px;
	color:var(--color-muted);
	font-size:18px;
}
.service-intro{
	max-width:900px;
}
.service-intro p{
	color:var(--color-text-secondary);
	line-height:1.9;
	margin-bottom:20px;
}
.check-list{
	padding-inline-start:25px;
	color:var(--color-text-secondary);
	line-height:2;
}
.process-list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
	padding:0;
	list-style:none;
}
.process-list li{
	background:var(--color-white);
	padding:30px;
	border-radius:20px;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.process-list h3{
	margin-bottom:12px;
}
.process-list p{
	color:var(--color-muted);
	line-height:1.8;
}
.service-faq{
	max-width:900px;
}
@media(max-width:900px){
.service-grid{
	grid-template-columns:1fr;
}
.process-list{
	grid-template-columns:1fr;
}
.service-hero h1{
	font-size:34px;
}
}
.contact-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:start;
}
.contact-info h2{
	margin-bottom:20px;
}
.contact-services{
	display:grid;
	gap:20px;
	margin-top:35px;
}
.contact-services div{
	padding:20px;
	background:var(--color-white);
	border-radius:16px;
	box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.contact-services h3{
	margin-bottom:8px;
}
.contact-box{
	width:100%;
	min-height:700px;
	overflow:hidden;
	border:0;
}
@media(max-width:900px){
	.contact-grid{
		grid-template-columns:1fr;
	}
}
.faq-category{
	margin-bottom:70px;
}
.faq-category h2{
	margin-bottom:30px;
	font-size:32px;
}
.faq-list{
	max-width:900px;
}
details{
	cursor:pointer;
	border-left:4px solid var(--color-muted);
}
details[open]{
	border-left:4px solid var(--color-primary);
}
details summary{
	padding-right:30px;
}
.reveal{
	opacity: 0;
	transform: translateY(30px);
	transition: .8s;
}
.reveal.show{
	opacity: 1;
	transform: none;
}
.legal-doc{
	padding: 32px;
    margin: 40px auto;
    max-width: 900px;
	background: #FFF;
	color: #000;
	border: 2px solid #EEE;
	font-size: 1rem;
	line-height: 2;
	white-space: pre-wrap;
}

@media(max-width:900px){
	.menu-toggle{
		display: block;
	}
	nav{
		position: fixed;
		inset-block-start: 76px;
		inset-inline-end: 0;
		width: 280px;
		height: calc(100vh - 76px);
		background: var(--color-white);
		padding: 30px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-shadow: -10px 0 30px rgba(0,0,0,.12);
		transform: translateX(100%);
		transition: 0.3s;
		z-index: 98;
	}
	nav.active{
		transform: translateX(0);
	}
	.hero-content{
		grid-template-columns: 1fr;
	}
	.hero{
		padding: 70px 0;
	}
	.hero h1{
		font-size: 38px;
	}
	.card-grid,
	.state-grid,
	.text-grid{
		grid-template-columns: 1fr;
	}
	.feature-grid{
		grid-template-columns: repeat(1,1fr);
	}
	.steps{
		grid-template-columns: 1fr;
	}
	section h2{
		font-size: 30px;
	}
	.page-title{
		font-size:36px;
	}
	.grid-2,
	.grid-3,
	.grid-4,
	.split{
		grid-template-columns:1fr;
	}
}
@media(max-width:600px){
	.feature-grid{
		grid-template-columns: 1fr;
	}
	.container{
		padding: 0 18px;
	}
	.page-title{
		font-size:30px;
	}
	.page-subtitle,
	.lead{
		font-size:16px;
	}
	th,
	td{
		padding:12px;
	}
}

@media(max-width:900px){
	.footer-main {
		padding-tom: 30px;
	}

	.footer-logo {
		font-size: 20px;
	}

	.footer-brand p {
		font-size: 13px;
		line-height: 1.7;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 16px;
	}

	.footer-legal {
		gap: 10px 20px;
	}

	.footer-copyright {
		font-size: 12px;
	}
}
