*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#F7F6F2;
--text:#111827;
--muted:#5F6876;
--soft:#FFFFFF;
--line:#E1E5DF;
--line-strong:#D1D5DB;
--ink:#111827;
--green:#8FB36B;
--green-soft:#EEF5E8;
}
html{scroll-behavior:smooth}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei","Inter",sans-serif;
background:var(--bg);
color:var(--text);
}
a{color:inherit}
.site-shell{max-width:1220px;margin:auto;padding:34px 40px 44px}
.site-nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
padding:18px 0;
}
.site-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--text);
text-decoration:none;
flex:0 0 auto;
}
.brand-icon{width:28px;height:28px;flex:0 0 auto}
.logo{font-size:24px;font-weight:650;letter-spacing:0}
.site-links{
display:flex;
align-items:center;
justify-content:flex-end;
gap:18px;
font-size:15px;
color:#4B5563;
flex-wrap:wrap;
}
.site-link{
color:var(--text);
text-decoration:none;
border-bottom:1px solid transparent;
line-height:1.7;
}
.site-link:hover{border-color:var(--text)}
.site-domain{color:#6B7280}
.eyebrow{
display:inline-block;
padding:8px 14px;
border:1px solid var(--line-strong);
border-radius:999px;
font-size:13px;
margin-bottom:24px;
background:var(--soft);
}
.home-hero{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:44px;
align-items:center;
padding:86px 0 62px;
}
.home-hero h1{
font-size:80px;
line-height:1.02;
letter-spacing:0;
max-width:760px;
}
.hero-copy{
margin-top:28px;
font-size:24px;
line-height:1.58;
max-width:660px;
color:#4B5563;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:8px;
font-size:15px;
text-decoration:none;
border:1px solid transparent;
white-space:nowrap;
}
.button.primary{background:var(--ink);color:#FFFFFF}
.button.secondary{background:#FFFFFF;color:var(--ink);border-color:var(--line-strong)}
.button.light{background:#FFFFFF;color:var(--ink)}
.runtime-board{
position:relative;
padding:28px;
border:1px solid #D9DED8;
border-radius:8px;
background:linear-gradient(180deg,#FFFFFF 0%,#F2F5F1 100%);
overflow:hidden;
}
.runtime-board:before{
content:"";
position:absolute;
left:28px;
right:28px;
top:50%;
height:1px;
background:#CBD5C0;
}
.board-row{
position:relative;
display:grid;
grid-template-columns:1fr 1.1fr 1fr;
gap:14px;
z-index:1;
}
.board-node{
min-height:168px;
padding:22px;
border:1px solid var(--line-strong);
border-radius:8px;
background:rgba(255,255,255,.9);
}
.board-node span,.product-card span,.scenario-card span{
display:block;
font-size:13px;
color:#6B7280;
margin-bottom:18px;
}
.board-node strong{display:block;font-size:24px;margin-bottom:10px}
.board-node p{font-size:15px;line-height:1.6;color:#6B7280}
.board-node.core{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.board-node.core span,.board-node.core p{color:#D1D5DB}
.section{padding:70px 0 30px}
.split-section{
display:grid;
grid-template-columns:1fr .68fr;
gap:38px;
align-items:end;
}
.section-label{
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:#6B7280;
margin-bottom:12px;
}
.section-title{
font-size:44px;
line-height:1.14;
max-width:760px;
}
.section-copy{
font-size:17px;
line-height:1.7;
color:#6B7280;
max-width:440px;
}
.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
padding-top:24px;
}
.product-card{
min-height:270px;
padding:34px;
border:1px solid var(--line);
border-radius:8px;
background:#FFFFFF;
}
.product-card h3{font-size:36px;margin-bottom:12px}
.product-card p{font-size:18px;line-height:1.65;color:#6B7280;max-width:520px}
.product-card a{
display:inline-block;
margin-top:28px;
font-size:15px;
color:var(--text);
text-decoration:none;
border-bottom:1px solid var(--text);
}
.scenario-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
padding-top:24px;
}
.scenario-card{
min-height:230px;
padding:26px;
border:1px solid var(--line);
border-radius:8px;
background:#FFFFFF;
}
.scenario-card h3{font-size:24px;margin-bottom:12px}
.scenario-card p{font-size:16px;line-height:1.62;color:#6B7280}
.company-band{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:32px;
margin-top:76px;
padding:50px;
border-radius:8px;
background:var(--ink);
color:#FFFFFF;
}
.company-band .section-label{color:#D1D5DB}
.company-band h2{font-size:42px;line-height:1.16;max-width:900px}
.site-footer{
display:flex;
justify-content:space-between;
gap:20px;
padding:72px 0 8px;
color:#6B7280;
font-size:14px;
}
@media(max-width:980px){
.site-shell{padding:28px}
.site-nav{align-items:flex-start;gap:18px}
.site-links{gap:14px;font-size:15px}
.home-hero{grid-template-columns:1fr;gap:34px;padding:60px 0 46px}
.home-hero h1{font-size:52px;line-height:1.08}
.hero-copy{font-size:20px}
.runtime-board{padding:18px}
.runtime-board:before{display:none}
.board-row,.split-section,.product-grid,.scenario-grid{grid-template-columns:1fr}
.board-node{min-height:auto}
.section{padding:56px 0 24px}
.section-title{font-size:34px}
.section-copy{margin-top:16px}
.company-band{display:block;padding:34px}
.company-band h2{font-size:34px}
.company-band .button{margin-top:24px}
}
@media(max-width:560px){
.site-shell{padding:24px}
.site-nav{display:block}
.site-brand{margin-bottom:16px}
.brand-icon{width:24px;height:24px}
.logo{font-size:22px}
.site-links{justify-content:flex-start;gap:12px;font-size:14px}
.home-hero{padding:48px 0 36px}
.home-hero h1{font-size:42px}
.hero-copy{font-size:18px}
.hero-actions{flex-direction:column}
.button{width:100%}
.product-card,.scenario-card{padding:24px}
.product-card h3{font-size:30px}
.section-title{font-size:31px}
.company-band{margin-top:50px;padding:28px}
.company-band h2{font-size:30px}
.site-footer{display:block;line-height:1.8}
}