/* ======================================================
   mokuOS™
   Premium Landing Page Style
   ====================================================== */
:root {
	--bg: #05070d;
	--bg2: #0b1220;
	--primary: #00d4ff;
	--accent: #00ffb2;
	--text: #ffffff;
	--text-muted: #9ca3af;
	--glass: rgba(255,255,255,.04);
	--glass-border: rgba(255,255,255,.08);
	--radius: 24px;
	--container: 1280px;
}
/* ======================================================
   RESET
   ====================================================== */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{
	scroll-behavior:smooth;
}
body{
	font-family:
	"Segoe UI",
	"PingFang SC",
	"Microsoft YaHei",
	sans-serif;
	color:var(--text);
	overflow-x:hidden;
	line-height:1.8;
	background:
	radial-gradient(
		circle at top center,
		rgba(0,212,255,.08),
		transparent 30%
	),
	radial-gradient(
		circle at bottom right,
		rgba(0,255,178,.04),
		transparent 35%
	),
	linear-gradient(
		180deg,
		#05070d 0%,
		#0a0f18 50%,
		#05070d 100%
	);
}
/* 不再使用粒子背景 */
#particles{
	display:none;
}
/* ======================================================
   CONTAINER
   ====================================================== */
.container{
	width:100%;
	max-width:var(--container);
	margin:auto;
	padding-left:30px;
	padding-right:30px;
}
/* ======================================================
   HEADER
   ====================================================== */
.header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
	backdrop-filter:blur(24px);
	background:rgba(5,7,13,.7);
	border-bottom:
	1px solid rgba(255,255,255,.04);
}
.header .container{
	height:80px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.logo{
	font-size:30px;
	font-weight:800;
	letter-spacing:.5px;
}
.logo span{
	color:var(--primary);
}
.nav{
	display:flex;
	gap:34px;
}
.nav a{
	text-decoration:none;
	color:var(--text-muted);
	transition:.3s;
}
.nav a:hover{
	color:var(--primary);
}
.mobile-menu-btn{
	display:none;
	background:none;
	border:none;
	color:white;
	font-size:26px;
	cursor:pointer;
}
/* ======================================================
   HERO
   ====================================================== */
.hero{
	   min-height:100vh;
	   display:flex;
	   align-items:center;
	   justify-content:center;
	   text-align:center;
	   max-width:1000px;
	   margin:auto;
	   padding:
	   140px
	   40px
	   100px;
   }
.hero-content{
	   width:100%;
	   max-width:900px;
	   margin:auto;
   }
.hero-tag{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:
	10px 18px;
	border-radius:999px;
	border:
	1px solid rgba(0,212,255,.15);
	background:
	rgba(0,212,255,.08);
	color:var(--primary);
	margin-bottom:30px;
}
.hero h1{
	font-size:88px;
	line-height:1.05;
	font-weight:800;
	margin-bottom:30px;
}
.hero h1 span{
	display:block;
	background:
	linear-gradient(
		90deg,
		#00d4ff,
		#4d7cff
	);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.hero p{
	font-size:22px;
	max-width:700px;
	margin: 0 auto 40px;
	color:var(--text-muted);
}
.hero-buttons{
	display:flex;
	gap:18px;
	justify-content: center;
}
.btn{
	text-decoration:none;
	padding:
	16px 34px;
	border-radius:16px;
	font-weight:600;
	transition:.35s;
}
.btn-primary{
	background:
	linear-gradient(
		135deg,
		#00d4ff,
		#4d7cff
	);
	color:white;
	box-shadow:
	0 10px 40px rgba(0,212,255,.25);
}
.btn-primary:hover{
	transform:translateY(-3px);
}
.btn-secondary{
	color:white;
	border:
	1px solid rgba(255,255,255,.08);
	background:
	rgba(255,255,255,.03);
}
.btn-secondary:hover{
	background:
	rgba(255,255,255,.08);
}
/* ======================================================
   SECTIONS
   ====================================================== */
.section{
	padding:130px 0;
	position:relative;
}
.section::before{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	width:1px;
	height:100%;
	background:
	linear-gradient(
		transparent,
		rgba(255,255,255,.03),
		transparent
	);
	transform:translateX(-50%);
}
.dark{
	background:
	rgba(255,255,255,.015);
}
.section-title{
	text-align:center;
	margin-bottom:70px;
}
.section-title span{
	color:var(--primary);
	letter-spacing:3px;
	font-size:12px;
}
.section-title h2{
	font-size:58px;
	margin:
	20px 0;
}
.section-title p{
	color:var(--text-muted);
	max-width:700px;
	margin:auto;
}
/* ======================================================
   CARDS
   ====================================================== */
.feature-grid,
.scenario-grid,
.stats-grid{
	display:grid;
	gap:24px;
}
.feature-grid{
	grid-template-columns:
	repeat(4,1fr);
}
.feature-card,
.scenario-card,
.stat-box,
.process-item{
	background:var(--glass);
	backdrop-filter:blur(24px);
	border:
	1px solid var(--glass-border);
	border-radius:var(--radius);
	padding:34px;
	transition:.35s;
}
.feature-card:hover,
.scenario-card:hover,
.stat-box:hover,
.process-item:hover{
	transform:
	translateY(-10px);
	border-color:
	rgba(0,212,255,.25);
	box-shadow:
	0 20px 60px rgba(0,212,255,.08),
	0 10px 30px rgba(0,0,0,.25);
}
.feature-card h3,
.scenario-card h3{
	color:var(--primary);
	margin-bottom:14px;
}
.feature-card p,
.scenario-card p{
	color:var(--text-muted);
}
/* ======================================================
   MODULES
   ====================================================== */
.module-grid{
	display:grid;
	grid-template-columns:
	repeat(4,1fr);
	gap:18px;
}
.module-grid div{
	text-align:center;
	padding:26px;
	border-radius:18px;
	background:
	rgba(255,255,255,.03);
	border:
	1px solid rgba(255,255,255,.06);
	transition:.3s;
}
.module-grid div:hover{
	color:var(--primary);
	border-color:
	rgba(0,212,255,.2);
}
/* ======================================================
   ARCH
   ====================================================== */
.architecture-wrapper{
	max-width:700px;
	margin:auto;
	text-align:center;
}
.arch-box{
	padding:24px;
	border-radius:18px;
	background:var(--glass);
	border:
	1px solid var(--glass-border);
}
.arch-line{
	width:2px;
	height:70px;
	margin:auto;
	background:
	linear-gradient(
		transparent,
		var(--primary),
		transparent
	);
}
.arch-row{
	display:flex;
	gap:30px;
	justify-content:center;
}
/* ======================================================
   PROCESS
   ====================================================== */
.process-grid{
	display:grid;
	grid-template-columns:
	repeat(5,1fr);
	gap:20px;
}
.process-item{
	text-align:center;
}
.process-item span{
	font-size:42px;
	color:var(--primary);
	font-weight:700;
}
/* ======================================================
   STATS
   ====================================================== */
.stats-grid{
	grid-template-columns:
	repeat(4,1fr);
}
.stat-box{
	text-align:center;
}
.stat-box h3{
	font-size:60px;
	color:var(--primary);
	margin-bottom:10px;
}
.stat-box p{
	color:var(--text-muted);
}
/* ======================================================
   CONTACT
   ====================================================== */
.contact-section{
	padding:150px 0;
}
.contact-card{
	max-width:900px;
	margin:auto;
	text-align:center;
	padding:80px 50px;
	border-radius:30px;
	background:var(--glass);
	backdrop-filter:blur(24px);
	border:
	1px solid var(--glass-border);
}
.contact-label{
	color:var(--accent);
	letter-spacing:3px;
}
.contact-card h2{
	margin-top:20px;
	font-size:62px;
}
.contact-card p{
	color:var(--text-muted);
	margin-top:18px;
}
.contact-email{
	display:inline-block;
	margin-top:36px;
	color:white;
	font-size:28px;
	text-decoration:none;
	font-weight:700;
}
.contact-email:hover{
	color:var(--primary);
}
/* ======================================================
   FOOTER
   ====================================================== */
footer{
	padding:50px 0;
	text-align:center;
	border-top:
	1px solid rgba(255,255,255,.05);
}
.footer-logo{
	font-size:30px;
	font-weight:800;
}
.footer-text{
	margin-top:12px;
	color:var(--text-muted);
}
.copyright{
	margin-top:16px;
	color:#6b7280;
	font-size:14px;
}
/* ======================================================
   RESPONSIVE
   ====================================================== */
@media(max-width:1100px){
	.hero{
		flex-direction:column;
		text-align:center;
	}
	.feature-grid,
	.stats-grid{
		grid-template-columns:
		repeat(2,1fr);
	}
	.process-grid{
		grid-template-columns:
		repeat(2,1fr);
	}
}
@media(max-width:768px){
	.nav{
		display:none;
	}
	.mobile-menu-btn{
		display:block;
	}
	.hero h1{
		font-size:54px;
	}
	.hero p{
		font-size:18px;
	}
	.hero-core{
		width:320px;
		height:320px;
	}
	.feature-grid,
	.scenario-grid,
	.module-grid,
	.stats-grid,
	.process-grid{
		grid-template-columns:1fr;
	}
	.arch-row{
		flex-direction:column;
	}
	.section-title h2{
		font-size:40px;
	}
	.contact-card h2{
		font-size:42px;
	}
	.contact-email{
		font-size:20px;
		word-break:break-all;
	}
}
@media(max-width:480px){
	.hero{
		padding-left:20px;
		padding-right:20px;
	}
	.hero h1{
		font-size:42px;
	}
	.hero-buttons{
		flex-direction:column;
	}
	.btn{
		width:100%;
	}
}