/* ===== 基础变量 ===== */
:root{
  --bg:#0a0d12;           /* 深色背景（科技风） */
  --panel:#0f141b;        /* 面板底色 */
  --card:#121924;         /* 卡片色 */
  --border:#1f2a37;
  --text:#e6edf3;         /* 主文字 */
  --mute:#9fb0c3;         /* 次级文字 */
  --accent:#3b82f6;       /* 科技蓝 */
  --accent-2:#06b6d4;     /* 青蓝渐变 */
  --radius:14px;
  --maxw:1150px;
}

/* ===== Reset & 基本排版 ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0a0d12 0%,#0b1118 100%);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* ===== 顶部导航 ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,13,18,.75);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:800;letter-spacing:.3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:20px}
.site-nav .nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:16px;align-items:center}
.nav-list>li{position:relative}
.nav-list>li>a{display:block;padding:10px 12px;border-radius:10px}
.nav-list>li>a:hover{background:rgba(255,255,255,.06)}
.has-sub .sub{display:none;position:absolute;left:0;top:100%;min-width:160px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px 0}
.has-sub:hover .sub{display:block}
.sub li a{display:block;padding:8px 12px;color:var(--text)}
.sub li a:hover{background:rgba(255,255,255,.06)}

/* ===== 横幅（轮播） ===== */
.hero{padding:14px 0;background:transparent}
.carousel{position:relative;border-radius:18px;border:1px solid var(--border);overflow:hidden;background:var(--panel)}
.c-track{display:flex;transition:transform .45s ease;list-style:none;margin:0;padding:0}
.c-slide{min-width:100%}
.c-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(0,0,0,.35);color:#fff}
.c-btn:hover{background:rgba(0,0,0,.55)}
.c-btn.prev{left:10px}
.c-btn.next{right:10px}
.c-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px}
.c-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--border);background:#fff;opacity:.6}
.c-dots button.is-active{opacity:1;background:var(--accent)}

/* ===== 首页主体 ===== */
.home-main{padding:26px 0}
.home-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 12;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.card-h{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0f141b 0%,#0d131a 100%)}
.card-title{font-size:18px;font-weight:700}
.card-h .sub{font-size:12px;color:var(--mute)}
.card-b{padding:16px 18px}
@media(min-width:980px){
  .home-grid .card:nth-of-type(1){grid-column:span 6}
  .home-grid .card:nth-of-type(2){grid-column:span 6}
  .home-grid .card:nth-of-type(3){grid-column:span 6}
  .home-grid .span-12{grid-column:span 12}
}

/* 列表/新闻 */
.news-list{list-style:none;margin:0;padding:0}
.news-item{padding:10px 0;border-bottom:1px dashed var(--border)}
.news-item .time{font-size:12px;color:var(--mute);margin-right:8px}
.excerpt{color:#cbd5e1}

/* 产品横向滚动 */
.products-carousel{overflow:auto}
.p-track{display:flex;gap:14px;list-style:none;margin:0;padding:2px}
.p-card{flex:0 0 213px;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.p-card .p-title{font-size:14px;padding:8px 10px}

/* 页面通用布局（二栏） */
.page-hero{padding:16px 0}
.page-hero img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border)}
.layout-2{display:grid;grid-template-columns:300px 1fr;gap:20px;padding:24px 0}
.sidebar-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.side-title{margin:0 0 10px}
.side-title small{color:var(--mute);font-weight:400;margin-left:6px}
.side-nav{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.side-nav a{display:block;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid var(--border)}
.side-nav a:hover{background:rgba(59,130,246,.12);border-color:#264d7a}

.breadcrumb{color:var(--mute);font-size:14px;margin-bottom:10px}
.content .page-title{margin:8px 0 14px}
.article{background:var(--card);border:1px solid var(--border);border-radius:14px}
.article .meta{color:var(--mute)}
.article .article-body{padding:16px 18px}
.contact-table{width:100%;border-collapse:collapse}
.contact-table td{border:1px solid var(--border);padding:12px}

/* 产品网格与相关模块 */
.product-grid,.related-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.product-grid{grid-template-columns:repeat(2,1fr)}
.related-grid{grid-template-columns:repeat(3,1fr)}
@media(min-width:980px){ .product-grid{grid-template-columns:repeat(4,1fr)} }
.product-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.product-card .p-title{font-size:14px;padding:8px 10px}
.product-specs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.product-specs li{display:flex;gap:8px;border-bottom:1px dashed var(--border);padding:6px 0}
.product-specs li span{color:var(--mute);min-width:56px}

/* 文章/翻页/友链/页脚 */
.pager a{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:10px;margin-right:6px}
.friend-links{border-top:1px solid var(--border);background:var(--panel);margin-top:26px}
.fl-title{max-width:var(--maxw);margin:0 auto;padding:14px 18px;color:var(--mute)}
.fl-list{max-width:var(--maxw);margin:0 auto;padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.fl-list a{color:#9fb0c3}
.site-footer{border-top:1px solid var(--border);background:#0b1118}
.site-footer .container{padding:16px 18px}
.foot-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;color:var(--mute)}
.foot-nav span{opacity:.5}
.copy,.meta{color:var(--mute);text-align:center;margin:8px 0}

/* 移动端导航 */
@media(max-width:900px){
  .site-nav .nav-toggle{display:inline-block;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px 10px;color:var(--text)}
  .nav-list{display:none;flex-direction:column;position:absolute;right:18px;top:56px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px;min-width:200px}
  .nav-list.show{display:flex}
  .has-sub .sub{position:static;border:none;background:transparent;padding:0}
  .has-sub:hover .sub{display:block}
  .layout-2{grid-template-columns:1fr}
}
