/* =====================================================
Duanlian Labs

全站统一样式文件

修改说明：

网站主色：
#111827

副文字：
#6b7280

背景：
#ffffff

===================================================== */

/* =====================================================
全局初始化
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* 页面平滑滚动 */
html{
scroll-behavior:smooth;
}

/* 全站默认字体 */
body{

font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

background:#ffffff;

color:#111827;

line-height:1.7;

}

/* 超链接 */
a{
text-decoration:none;
}

/* 图片默认自适应 */
img{
max-width:100%;
display:block;
}

/* 页面内容容器 */
.container{

width:92%;

max-width:1280px;

margin:auto;

}

/* =====================================================
顶部导航栏
===================================================== */

header{

position:sticky;

top:0;

z-index:999;

background:rgba(255,255,255,.92);

backdrop-filter:blur(10px);

border-bottom:1px solid #eeeeee;

}

/* 导航容器 */
.navbar{

height:72px;

display:flex;

justify-content:space-between;

align-items:center;

}

/* 网站Logo */
.logo{

font-size:24px;

font-weight:700;

}

/* 导航菜单 */
.nav-links{

display:flex;

gap:24px;

}

.nav-links a{

color:#4b5563;

transition:.2s;


}

.nav-links a:hover{


color:#111827;


}

/* =====================================================
首页 Hero 区域
===================================================== */

.hero{


padding:140px 0 120px;

text-align:center;


}

/* 小标签 */
.hero-tag{


display:inline-block;

padding:8px 16px;

border-radius:999px;

background:#f3f4f6;

color:#6b7280;

font-size:14px;


}

/* 主标题 */
.hero h1{


margin-top:24px;

font-size:72px;

line-height:1.05;

font-weight:800;


}

/* 副标题 */
.hero p{


margin-top:28px;

max-width:800px;

margin-left:auto;

margin-right:auto;

color:#6b7280;

font-size:22px;


}

/* 按钮区域 */
.hero-buttons{


margin-top:40px;


}

/* 通用按钮 */
.btn{


display:inline-block;

padding:14px 28px;

border-radius:12px;

font-weight:600;


}

/* 深色按钮 */
.btn-primary{


background:#111827;

color:white;


}

.btn-primary:hover{


opacity:.9;


}

/* =====================================================
通用区域标题
===================================================== */

.section{


padding:40px 0;


}

.section-title{


text-align:center;

font-size:42px;

margin-bottom:60px;


}

/* =====================================================
产品卡片区域
===================================================== */

/*
自动响应式布局


手机：
1列

平板：
2列

电脑：
3列

超宽屏：
4列


*/

.products-grid{


display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:18px;


}

/* 单个产品卡片 */
.product-card{


background:#ffffff;

border:1px solid #e5e7eb;

border-radius:24px;

overflow:hidden;

transition:.25s;


}

/* 鼠标悬停 */
.product-card:hover{


transform:translateY(-4px);

box-shadow:
0 12px 30px rgba(0,0,0,.06);


}

/* 产品截图区域 */
.product-image{


background:#f8fafc;

height:220px;

display:flex;

align-items:center;

justify-content:center;


}

/* 产品截图 */
.product-image img{


max-height:180px;


}

/* 产品内容 */
.product-content{


padding:22px;


}

/* 产品标题 */
.product-content h3{


font-size:28px;

margin-bottom:12px;


}

/* 产品简介 */
.product-content p{


color:#6b7280;

margin-bottom:22px;


}

/* 产品按钮区域 */
.product-actions{


display:flex;

gap:12px;

flex-wrap:wrap;


}

/* 下载按钮 */
.btn-download{

    display:inline-block;

    background:#111827;

    color:#ffffff !important;

    padding:10px 18px;

    border-radius:10px;
}

/* 了解更多按钮 */
.btn-outline{


border:1px solid #d1d5db;

color:#111827;

padding:10px 18px;

border-radius:10px;


}

/* =====================================================
关于区域
===================================================== */

.about{


max-width:900px;

margin:auto;

text-align:center;


}

.about p{


color:#6b7280;

font-size:18px;


}

/* =====================================================
页脚
===================================================== */

footer{


margin-top:100px;

border-top:1px solid #e5e7eb;

padding:40px 0;

text-align:center;

color:#6b7280;


}

/* =====================================================
手机适配
===================================================== */

@media(max-width:768px){


.hero{

    padding:90px 0;
}

.hero h1{

    font-size:48px;
}

.hero p{

    font-size:18px;
}

.navbar{

    flex-direction:column;

    height:auto;

    padding:16px 0;

    gap:12px;
}

.nav-links{

    gap:14px;

    font-size:14px;
}

}

/* =========================
   手机优化
========================= */

@media(max-width:768px){

    .products-grid{
        gap:36px;
    }

    .product-card{
        border-radius:20px;
    }

    .product-image{
        height:200px;
        overflow:hidden;
    }

    .product-image img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .product-actions{
        flex-direction:column;
    }

    .btn-download,
    .btn-outline{
        width:100%;
        text-align:center;
    }
}

/* =====================================================
联系方式区域
===================================================== */

.contact-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

max-width:1000px;

margin:auto;

}

.contact-card{

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:24px;

padding:40px;

}

.contact-card h3{

margin-bottom:20px;

font-size:28px;

}

.contact-card p{

color:#6b7280;

margin-bottom:16px;

}

.contact-buttons{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:20px;

}

@media(max-width:768px){

.contact-layout{

    grid-template-columns:1fr;
}

.contact-buttons{

    flex-direction:column;
}

.contact-buttons a{

    width:100%;

    text-align:center;
}

}