/* =========================================================
酷云 KuCloud ·品牌主站样式
纯手写 CSS，无框架、无构建
注：多值简写一律用制表符分隔，避免工具吞空格
 ========================================================= */

:root {
 --bg: #070b16;
 --bg-soft: #0b1224;
 --surface: #101a30;
 --line: rgba(148,178,224,0.14);
 --line-strong: rgba(148,178,224,0.26);
 --text: #eef4ff;
 --text-mid: #a9bcd9;
 --text-dim: #7688a6;
 --brand: #3b82f6;
 --brand-2: #22d3ee;
 --radius:16px;
 --radius-sm:10px;
 --shadow:0	24px	60px	-24px	rgba(6,14,30,0.9);
 --max:1120px;
 --header-h:68px;
 --ease: cubic-bezier(0.22,0.61,0.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
 scroll-behavior: smooth;
 scroll-padding-top: calc(var(--header-h) +16px);
 -webkit-text-size-adjust:100%;
}

body {
 margin:0;
 background: var(--bg);
 color: var(--text);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
 "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
 font-size:16px;
 line-height:1.7;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}

img, svg { display: block; max-width:100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin:0; line-height:1.25; letter-spacing: -0.01em; font-weight:700; }
p { margin:0; }
ul, ol { margin:0; padding:0; list-style: none; }

.container {
 width:100%;
 max-width: var(--max);
 margin-inline: auto;
 padding-inline:24px;
}

.skip-link {
 position: absolute;
 left: -9999px;
 top:12px;
 z-index:999;
 padding:10px	16px;
 background: var(--brand);
 border-radius: var(--radius-sm);
}
.skip-link:focus { left:16px; }

:focus-visible {
 outline:2px solid var(--brand-2);
 outline-offset:3px;
 border-radius:4px;
}

/* ---------------- Header ---------------- */

.site-header {
 position: sticky;
 top:0;
 z-index:100;
 height: var(--header-h);
 display: flex;
 align-items: center;
 background: rgba(7,11,22,0.72);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom:1px solid transparent;
 transition: border-color	0.3s	var(--ease), background	0.3s	var(--ease);
}
.site-header.is-scrolled {
 border-bottom-color: var(--line);
 background: rgba(7,11,22,0.92);
}

.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap:24px;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap:10px;
 font-weight:700;
 font-size:17px;
}
.brand-mark {
 display: grid;
 place-items: center;
 width:34px;
 height:34px;
 border-radius:10px;
 background: linear-gradient(150deg, rgba(59,130,246,0.22), rgba(34,211,238,0.12));
 border:1px solid var(--line-strong);
 color: var(--brand-2);
 flex: none;
}
.brand-mark svg { width:19px; height:19px; }
.brand-name { display: inline-flex; align-items: baseline; gap:7px; white-space: nowrap; }
.brand-name em {
 font-style: normal;
 font-size:12.5px;
 font-weight:600;
 letter-spacing:0.08em;
 text-transform: uppercase;
 color: var(--text-dim);
}

.site-nav {
 display: flex;
 align-items: center;
 gap:30px;
 font-size:14.5px;
}
.site-nav > a { color: var(--text-mid); transition: color	0.2s	var(--ease); }
.site-nav > a:hover { color: var(--text); }
.site-nav .nav-cta { color: #04101f; }

.nav-toggle {
 display: none;
 width:42px;
 height:42px;
 padding:0;
 border:1px solid var(--line-strong);
 border-radius:10px;
 background: transparent;
 cursor: pointer;
}
.nav-toggle span {
 display: block;
 width:17px;
 height:1.7px;
 margin:3.6px	auto;
 background: var(--text);
 border-radius:2px;
 transition: transform	0.25s	var(--ease), opacity	0.2s	var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.3px) rotate(-45deg); }

/* ---------------- Buttons ---------------- */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap:8px;
 height:46px;
 padding-inline:22px;
 font-family: inherit;
 font-size:15px;
 font-weight:600;
 line-height:1;
 border:1px solid transparent;
 border-radius:999px;
 background: transparent;
 color: var(--text);
 cursor: pointer;
 white-space: nowrap;
 transition: transform	0.2s	var(--ease), background	0.25s	var(--ease),
 border-color	0.25s	var(--ease), box-shadow	0.25s	var(--ease), color	0.2s	var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .ico { width:16px; height:16px; }

.btn-primary {
 color: #04101f;
 background: linear-gradient(135deg, var(--brand-2), var(--brand));
 box-shadow:0	10px	26px	-12px	rgba(59,130,246,0.9);
}
.btn-primary:hover { box-shadow:0	16px	34px	-12px	rgba(59,130,246,0.95); }

.btn-ghost {
 border-color: var(--line-strong);
 color: var(--text-mid);
 background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(148,178,224,0.45); }

.btn-outline {
 border-color: rgba(255,255,255,0.34);
 color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.5); }

.btn-sm { height:38px; padding-inline:18px; font-size:14px; }
.btn-lg { height:52px; padding-inline:28px; font-size:15.5px; }

/* ---------------- Hero ---------------- */

.hero {
 position: relative;
 padding-block:92px	74px;
 overflow: hidden;
}
.hero-glow {
 position: absolute;
 inset: -30%	0	auto;
 height:720px;
 background:
 radial-gradient(closest-side at	50%	40%, rgba(59,130,246,0.26), transparent	70%),
 radial-gradient(closest-side at	68%	20%, rgba(34,211,238,0.16), transparent	70%);
 filter: blur(12px);
 pointer-events: none;
}
.hero-inner { position: relative; max-width:780px; }

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap:8px;
 margin-bottom:22px;
 padding-block:6px;
 padding-inline:14px	11px;
 font-size:13px;
 font-weight:600;
 letter-spacing:0.02em;
 color: #bfe6f5;
 background: rgba(34,211,238,0.08);
 border:1px solid rgba(34,211,238,0.24);
 border-radius:999px;
}
.eyebrow::before {
 content: "";
 width:6px;
 height:6px;
 border-radius:50%;
 background: var(--brand-2);
 box-shadow:0	0	3px	rgba(34,211,238,0.18);
}

.hero h1 {
 font-size: clamp(34px,5.6vw,60px);
 line-height:1.12;
 letter-spacing: -0.025em;
}
.grad {
 background: linear-gradient(100deg, #8bb9ff	0%, #5ae0f0	55%, #a8f0ff	100%);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

.hero-lead {
 margin-top:24px;
 max-width:640px;
 font-size: clamp(15.5px,1.6vw,17.5px);
 color: var(--text-mid);
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap:14px;
 margin-top:36px;
}

.hero-meta {
 display: flex;
 flex-wrap: wrap;
 gap:12px	26px;
 margin-top:34px;
 font-size:14px;
 color: var(--text-dim);
}
.hero-meta li { display: inline-flex; align-items: center; gap:8px; }
.hero-meta li::before {
 content: "";
 width:5px;
 height:5px;
 border-radius:50%;
 background: var(--brand);
}

/* ---------------- Sections ---------------- */

.section { padding-block:84px; }
.section-soft {
 background: linear-gradient(180deg, transparent, rgba(16,26,48,0.55)	12%, rgba(16,26,48,0.55)	88%, transparent);
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}

.section-head { margin-bottom:44px; max-width:620px; }
.section-head-left { margin-bottom:0; }
.section-head h2 { font-size: clamp(25px,3.2vw,34px); letter-spacing: -0.02em; }
.section-head p { margin-top:14px; font-size:15.5px; color: var(--text-mid); }

.grid { display: grid; gap:20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ---------------- Cards ---------------- */

.card {
 position: relative;
 padding:26px;
 background: linear-gradient(180deg, var(--surface), var(--bg-soft));
 border:1px solid var(--line);
 border-radius: var(--radius);
 transition: border-color	0.3s	var(--ease), transform	0.3s	var(--ease),
 box-shadow	0.3s	var(--ease);
}
.card h3 { font-size:18px; margin-bottom:10px; }
.card p { font-size:14.8px; color: var(--text-mid); }

.project { display: flex; flex-direction: column; gap:6px; }
a.project { cursor: pointer; }
a.project:hover {
 transform: translateY(-3px);
 border-color: rgba(34,211,238,0.4);
 box-shadow: var(--shadow);
}
a.project:hover .project-arrow { color: var(--brand-2); transform: translate(2px, -2px); }

.project-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap:12px;
 margin-bottom:18px;
 min-height:26px;
}
.project-arrow { color: var(--text-dim); transition: color	0.25s	var(--ease), transform	0.25s	var(--ease); }
.project-arrow svg { width:20px; height:20px; }

.project-url {
 margin-top:18px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size:13px;
 color: var(--brand-2);
}

.project-soon { background: linear-gradient(180deg, rgba(16,26,48,0.55), rgba(11,18,36,0.55)); }
.project-soon h3 { color: var(--text-mid); }
.project-soon .project-url { color: var(--text-dim); }

.badge {
 display: inline-flex;
 align-items: center;
 gap:6px;
 padding:4px	11px;
 font-size:12px;
 font-weight:600;
 border-radius:999px;
 border:1px solid transparent;
}
.badge-live {
 color: #6ee7b7;
 background: rgba(16,185,129,0.12);
 border-color: rgba(16,185,129,0.3);
}
.badge-live::before {
 content: "";
 width:5px;
 height:5px;
 border-radius:50%;
 background: #34d399;
 box-shadow:0	0	3px	rgba(52,211,153,0.18);
}
.badge-soon {
 color: var(--text-dim);
 background: rgba(148,178,224,0.08);
 border-color: var(--line);
}

/* ---------------- Scene cards ---------------- */

.scene { padding:28px; }
.scene-ico {
 display: grid;
 place-items: center;
 width:44px;
 height:44px;
 margin-bottom:18px;
 border-radius:12px;
 color: var(--brand-2);
 background: rgba(59,130,246,0.1);
 border:1px solid rgba(59,130,246,0.24);
}
.scene-ico svg { width:21px; height:21px; }
.scene:hover { border-color: var(--line-strong); }

/* ---------------- Why ---------------- */

.why-wrap {
 display: grid;
 grid-template-columns: minmax(0,0.85fr)	minmax(0,1.15fr);
 gap:56px;
 align-items: start;
}
.why-list { display: grid; gap:30px; }
.why-list li { padding-left:22px; border-left:2px solid rgba(59,130,246,0.35); }
.why-list h3 { font-size:16.5px; margin-bottom:8px; }
.why-list p { font-size:14.8px; color: var(--text-mid); }

/* ---------------- Code ---------------- */

.code-wrap {
 background: #060a13;
 border:1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow);
}
.code-head {
 display: flex;
 align-items: center;
 gap:10px;
 padding:12px	16px;
 background: rgba(255,255,255,0.025);
 border-bottom:1px solid var(--line);
}
.code-dot {
 width:9px;
 height:9px;
 border-radius:50%;
 background: rgba(34,211,238,0.7);
 box-shadow:0	0	3px	rgba(34,211,238,0.12);
}
.code-title {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size:12.5px;
 color: var(--text-dim);
 letter-spacing:0.03em;
}
.code-copy {
 margin-left: auto;
 padding:5px	12px;
 font-family: inherit;
 font-size:12.5px;
 color: var(--text-mid);
 background: transparent;
 border:1px solid var(--line-strong);
 border-radius:7px;
 cursor: pointer;
 transition: color	0.2s	var(--ease), border-color	0.2s	var(--ease);
}
.code-copy:hover { color: var(--text); border-color: rgba(148,178,224,0.45); }
.code-copy.is-done { color: #6ee7b7; border-color: rgba(16,185,129,0.4); }

.code-block {
 margin:0;
 padding:22px	20px;
 overflow-x: auto;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 font-size:13.4px;
 line-height:1.85;
 color: #cfe2f7;
 tab-size:2;
}
.code-block::-webkit-scrollbar { height:8px; }
.code-block::-webkit-scrollbar-thumb { background: rgba(148,178,224,0.2); border-radius:99px; }

.code-note { margin-top:16px; font-size:14px; color: var(--text-dim); }

/* ---------------- FAQ ---------------- */

.faq { border-top:1px solid var(--line); max-width:820px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
 position: relative;
 padding-block:20px;
 padding-inline:0	44px;
 font-size:16px;
 font-weight:600;
 cursor: pointer;
 list-style: none;
 transition: color	0.2s	var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-2); }
.faq summary::after {
 content: "";
 position: absolute;
 right:6px;
 top:50%;
 width:8px;
 height:8px;
 margin-top: -6px;
 border-right:1.8px solid var(--text-dim);
 border-bottom:1.8px solid var(--text-dim);
 transform: rotate(45deg);
 transition: transform	0.25s	var(--ease), border-color	0.2s	var(--ease);
}
.faq details[open] summary::after {
 transform: rotate(-135deg);
 margin-top: -2px;
 border-color: var(--brand-2);
}
.faq details p {
 padding-block:0	22px;
 padding-inline:0	40px;
 margin-top: -6px;
 font-size:14.8px;
 color: var(--text-mid);
}
.faq code {
 padding:2px	6px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size:13px;
 color: #cfe2f7;
 background: rgba(148,178,224,0.1);
 border-radius:5px;
}
.faq a { color: var(--brand-2); text-decoration: underline; text-underline-offset:3px; }

/* ---------------- Contact Form ---------------- */

.contact-box {
	max-width: 680px;
	margin-inline: auto;
	padding: 38px	34px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.form-label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-mid);
}
.form-label .required {
	color: #f87171;
}
.form-input,
.form-textarea {
	width: 100%;
	padding: 12px	16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background: rgba(7,11,22,0.72);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-input::placeholder,
.form-textarea::placeholder {
	color: var(--text-dim);
}
.form-input:focus,
.form-textarea:focus {
	border-color: var(--brand);
	background: rgba(7,11,22,0.95);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}
.form-textarea {
	resize: vertical;
	min-height: 110px;
	line-height: 1.6;
}
.form-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}
.form-actions .btn-lg {
	align-self: flex-start;
}
.form-status {
	min-height: 20px;
	font-size: 14.5px;
	line-height: 1.5;
	transition: all 0.2s;
}
.form-status.is-loading {
	color: var(--brand-2);
}
.form-status.is-success {
	color: #34d399;
	font-weight: 500;
	padding: 10px	14px;
	background: rgba(52,211,153,0.12);
	border: 1px solid rgba(52,211,153,0.3);
	border-radius: var(--radius-sm);
}
.form-status.is-error {
	color: #f87171;
	font-weight: 500;
	padding: 10px	14px;
	background: rgba(248,113,113,0.12);
	border: 1px solid rgba(248,113,113,0.3);
	border-radius: var(--radius-sm);
}
@media (max-width: 720px) {
	.contact-box { padding: 24px	18px; }
	.form-actions .btn-lg { width: 100%; }
}

/* ---------------- CTA band ---------------- */

.cta-band { padding-block:10px	88px; }
.cta-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap:30px;
 padding:44px	46px;
 background:
 radial-gradient(120%	160% at	12%	0%, rgba(59,130,246,0.28), transparent	62%),
 radial-gradient(120%	160% at	90%	110%, rgba(34,211,238,0.16), transparent	60%),
 var(--surface);
 border:1px solid var(--line-strong);
 border-radius:22px;
}
.cta-inner h2 { font-size: clamp(23px,2.7vw,30px); }
.cta-inner p { margin-top:10px; font-size:15px; color: var(--text-mid); }
.cta-actions { display: flex; flex-wrap: wrap; gap:12px; }

/* ---------------- Footer ---------------- */

.site-footer {
 padding-block:46px	54px;
 border-top:1px solid var(--line);
 background: var(--bg-soft);
}
.footer-inner {
 display: grid;
 grid-template-columns: auto	1fr	auto;
 align-items: center;
 gap:20px	40px;
}
.footer-brand {
 display: inline-flex;
 align-items: center;
 gap:10px;
 font-weight:700;
 font-size:16px;
}
.footer-brand .brand-mark { width:30px; height:30px; border-radius:9px; }
.footer-brand .brand-mark svg { width:17px; height:17px; }

.footer-links { display: flex; flex-wrap: wrap; gap:10px	22px; font-size:14px; color: var(--text-mid); }
.footer-links a:hover { color: var(--text); }

.footer-note { font-size:14px; color: var(--text-mid); }
.footer-note a { color: var(--brand-2); }
.footer-note a:hover { text-decoration: underline; text-underline-offset:3px; }

.footer-copy {
 grid-column:1 / -1;
 padding-top:22px;
 margin-top:6px;
 border-top:1px solid var(--line);
 font-size:13px;
 color: var(--text-dim);
}

/* ---------------- Reveal on scroll ---------------- */

.reveal {
 opacity:0;
 transform: translateY(16px);
 transition: opacity	0.65s	var(--ease), transform	0.65s	var(--ease);
}
.reveal.is-in { opacity:1; transform: none; }

/* ---------------- Responsive ---------------- */

@media (max-width:960px) {
 .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
 .why-wrap { grid-template-columns:1fr; gap:36px; }
 .footer-inner { grid-template-columns:1fr; gap:18px; }
 .footer-copy { grid-column: auto; }
}

@media (max-width:820px) {
 .nav-toggle { display: block; }
 .site-nav {
 position: absolute;
 top: var(--header-h);
 left:0;
 right:0;
 display: none;
 flex-direction: column;
 align-items: stretch;
 gap:4px;
 padding:14px	24px	20px;
 background: rgba(9,14,27,0.98);
 border-bottom:1px solid var(--line);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 }
 .site-nav.is-open { display: flex; }
 .site-nav > a {
 padding:12px	4px;
 font-size:15.5px;
 border-bottom:1px solid var(--line);
 }
 .site-nav .nav-cta { margin-top:12px; border-bottom:0; }
}

@media (max-width:720px) {
 .container { padding-inline:20px; }
 .hero { padding-block:62px	54px; }
 .section { padding-block:60px; }
 .grid-2, .grid-3 { grid-template-columns:1fr; }
 .section-head { margin-bottom:32px; }
 .hero-actions .btn-lg { width:100%; }
 .cta-inner { padding:32px	24px; }
 .cta-actions { width:100%; }
 .code-block { font-size:12.4px; padding:18px	16px; }
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation-duration:0.001ms !important;
 transition-duration:0.001ms !important;
 }
 .reveal { opacity:1; transform: none; }
}