/* 武汉市创芯科有限公司 官网样式 - 手写，蓝灰务实商务风 */
:root{
  --bg:#f4f6f9; --card:#ffffff; --ink:#28323d; --text:#4c5866; --muted:#8893a1;
  --line:#e5e9ef; --primary:#2f5d80; --primary-d:#244a66; --primary-soft:#eaf0f5; --accent:#3b7aa0;
  --radius:8px; --maxw:1120px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text); background:var(--bg); line-height:1.7; font-size:15px; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none;}
a:hover{color:var(--primary-d);}
img{max-width:100%; display:block;}
h1,h2,h3,h4{color:var(--ink); font-weight:600; line-height:1.3; margin:0 0 .5em;}
p{margin:0 0 1em;}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* 按钮 */
.btn{display:inline-block; padding:10px 22px; border-radius:var(--radius); font-size:15px; cursor:pointer; border:1px solid transparent; transition:background .15s,border-color .15s,color .15s; text-align:center;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-d); color:#fff;}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7);}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff;}
.btn-line{background:#fff; color:var(--primary); border-color:var(--line);}
.btn-line:hover{background:var(--primary-soft); color:var(--primary-d);}
.btn-block{width:100%;}
.btn-sm{padding:6px 14px; font-size:13px;}
.text-link{color:var(--primary); font-size:14px; font-weight:500;}
.text-link:hover{text-decoration:underline;}

/* 顶部导航 */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid var(--line);}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:18px;}
.brand img{width:30px; height:30px;}
.site-nav{display:flex; gap:26px;}
.site-nav a{color:var(--text); font-size:15px; padding:4px 0; position:relative;}
.site-nav a:hover{color:var(--primary);}
.site-nav a.active{color:var(--primary); font-weight:600;}
.site-nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--primary);}
.nav-toggle{display:none; background:none; border:0; font-size:24px; color:var(--ink); cursor:pointer;}

/* Hero */
.hero{position:relative; min-height:380px; display:flex; align-items:center; background-size:cover; background-position:center; background-color:var(--primary-d);}
.hero-mask{position:absolute; inset:0; background:rgba(28,42,58,.62);}
.hero-text{position:relative; z-index:2; color:#fff; padding:40px 20px; max-width:720px;}
.hero-text h1{color:#fff; font-size:34px; margin-bottom:12px;}
.hero-sub{font-size:17px; color:rgba(255,255,255,.9); margin-bottom:24px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* 区块 */
.section{padding:56px 0;}
.section-alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-title{font-size:24px; position:relative; padding-left:14px;}
.sec-title::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; background:var(--primary); border-radius:2px;}
.sec-title.center{text-align:center; padding-left:0;}
.sec-title.center::before{display:none;}
.sec-desc{color:var(--muted); text-align:center; margin-top:-4px; margin-bottom:28px;}

/* 公司简介 */
.intro{display:grid; grid-template-columns:1.6fr 1fr; gap:36px; align-items:start;}
.intro-body p{margin:0 0 14px; color:var(--text);}
.mini-list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
.mini-list li{padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:500;}
.mini-list li:last-child{border-bottom:0;}
.mini-list li span{position:relative; padding-left:18px;}
.mini-list li span::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--primary); border-radius:50%;}

/* 服务卡片（细微错落） */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; transition:border-color .15s,transform .15s; }
.card:hover{border-color:var(--primary); transform:translateY(-3px);}
.svc-card.offset{margin-top:22px;}
.svc-ico{width:46px; height:46px; border-radius:10px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.svc-ico .ico{width:26px; height:26px;}
.card h3{font-size:17px; margin-bottom:8px;}
.card p{color:var(--text); margin-bottom:12px; font-size:14px;}

/* 核心优势 */
.adv-list{display:grid; grid-template-columns:1fr 1fr; gap:18px 40px;}
.adv-item{display:flex; gap:16px; align-items:flex-start; padding-top:14px; border-top:1px solid var(--line);}
.adv-no{font-size:26px; font-weight:700; color:var(--primary-soft); line-height:1; flex:none; -webkit-text-stroke:1px var(--primary);}
.adv-body h3{font-size:16px; margin-bottom:4px;}
.adv-body p{color:var(--text); font-size:14px; margin:0;}

/* 案例 */
.case-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.case-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:border-color .15s;}
.case-card:hover{border-color:var(--primary);}
.case-thumb{background:var(--primary-soft); aspect-ratio:16/9;}
.case-thumb img{width:100%; height:100%; object-fit:cover;}
.case-body{padding:18px 20px;}
.case-body h3{font-size:16px; margin-bottom:6px;}
.case-body p{color:var(--text); font-size:14px; margin:0;}

/* CTA */
.cta-band{background:var(--primary-d); color:#fff;}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:34px 20px; flex-wrap:wrap;}
.cta-band h2{color:#fff; margin:0 0 6px; font-size:22px;}
.cta-band p{color:rgba(255,255,255,.85); margin:0;}

/* 页脚 */
.site-footer{background:#222c36; color:#c5ced8; padding-top:40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding-bottom:30px;}
.f-brand{color:#fff; font-size:17px; font-weight:700; margin-bottom:10px;}
.f-line{font-size:14px; margin:4px 0; color:#aeb9c4;}
.footer-grid a{color:#aeb9c4;}
.footer-grid a:hover{color:#fff;}
.f-title{color:#fff; font-weight:600; margin-bottom:10px;}
.footer-bottom{border-top:1px solid #313d48; padding:16px 20px; font-size:13px; color:#8f9aa6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.footer-bottom a{color:#8f9aa6;}
.footer-bottom a:hover{color:#fff;}

/* 内页头部 */
.page-head{background:var(--primary-d); color:#fff; padding:46px 0;}
.page-head h1{color:#fff; font-size:28px; margin:0 0 8px;}
.page-head p{color:rgba(255,255,255,.85); margin:0;}

/* 文章/列表 */
.narrow{max-width:820px;}
.article p{margin:0 0 16px;}
.dot-list{list-style:none; padding:0; margin:0;}
.dot-list li{padding:10px 0 10px 20px; border-bottom:1px dashed var(--line); position:relative; color:var(--text);}
.dot-list li::before{content:""; position:absolute; left:0; top:18px; width:7px; height:7px; background:var(--primary); border-radius:50%;}
.sub{font-size:15px; color:var(--ink); margin:18px 0 8px;}

/* 联系页 */
.contact-layout{display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:start;}
.contact-info{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:24px;}
.info-row{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
.info-row:last-of-type{border-bottom:0;}
.info-k{flex:none; width:70px; color:var(--muted); font-size:14px;}
.info-v{color:var(--ink); font-weight:500;}
.info-note{margin-top:14px; font-size:13px; color:var(--muted);}
.contact-form{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:24px;}

/* 表单 */
.field{margin-bottom:16px;}
.field label{display:block; font-size:14px; color:var(--ink); margin-bottom:6px; font-weight:500;}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field textarea,.field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px; color:var(--ink); background:#fff; font-family:inherit; transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--primary);}
.field textarea{resize:vertical;}
.field.inline{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.alert{padding:11px 14px; border-radius:6px; font-size:14px; margin-bottom:16px;}
.alert-ok{background:#eaf6ee; color:#1f7a3d; border:1px solid #bfe3cb;}
.alert-err{background:#fdecec; color:#b23b3b; border:1px solid #f3c9c9;}
.alert-err ul{margin:0; padding-left:18px;}

/* ===== 后台 ===== */
.admin-body{background:#eef1f5;}
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--primary-d);}
.login-box{width:340px; background:#fff; border-radius:10px; padding:30px 28px; box-shadow:0 10px 30px rgba(0,0,0,.18);}
.login-brand{font-size:20px; font-weight:700; color:var(--ink); text-align:center;}
.login-sub{color:var(--muted); text-align:center; margin-bottom:18px;}
.login-tip{margin-top:14px; font-size:12px; color:var(--muted); text-align:center;}
.admin-shell{display:flex; min-height:100vh;}
.admin-side{width:200px; flex:none; background:#222c36; color:#c5ced8; padding:18px 0;}
.admin-logo{color:#fff; font-weight:700; font-size:16px; padding:0 20px 16px; border-bottom:1px solid #313d48; margin-bottom:10px;}
.admin-nav{display:flex; flex-direction:column;}
.admin-nav a{color:#aeb9c4; padding:11px 20px; font-size:14px; border-left:3px solid transparent;}
.admin-nav a:hover{background:#2b3743; color:#fff;}
.admin-nav a.on{background:#2b3743; color:#fff; border-left-color:var(--primary);}
.admin-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.admin-bar{height:54px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 22px; gap:16px;}
.admin-user{font-size:13px; color:var(--muted);}
.admin-crumb{font-weight:600; color:var(--ink);}
.admin-content{flex:1; padding:22px; overflow:auto;}
.admin-foot{padding:14px 22px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); background:#fff;}
.panel{background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 22px; margin-bottom:20px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.panel-title{font-size:17px; margin:0 0 14px;}
.panel-head .panel-title{margin:0;}
.panel-tip{color:var(--muted); font-size:13px; margin:-6px 0 14px;}
.sub{font-size:15px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
.form-grid .col-2{grid-column:1 / -1;}
.banner-preview{border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:14px; max-height:200px;}
.banner-preview img{width:100%; object-fit:cover; max-height:200px;}
.thumb-prev{border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:10px; max-width:240px;}
.thumb-prev img{width:100%;}
.tbl{width:100%; border-collapse:collapse; font-size:14px;}
.tbl th,.tbl td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line);}
.tbl th{color:var(--muted); font-weight:600; background:#fafbfc;}
.tbl .muted{color:var(--muted);}
.tbl .ops{display:flex; gap:12px; align-items:center;}
.tbl .ops a,.link,.link-danger{background:none; border:0; color:var(--primary); cursor:pointer; font-size:13px; padding:0; font-family:inherit;}
.link-danger{color:#c0392b;}
.link:hover,.link-danger:hover{text-decoration:underline;}
.inline-form{display:inline;}
.tag{display:inline-block; font-size:12px; padding:2px 8px; border-radius:4px; background:var(--primary-soft); color:var(--primary);}
.tag-grey{background:#eef1f5; color:var(--muted);}
.badge{display:inline-block; font-size:12px; background:var(--primary); color:#fff; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle;}
.msg-list{display:flex; flex-direction:column; gap:12px;}
.msg-item{border:1px solid var(--line); border-radius:8px; padding:14px 16px; background:#fff;}
.msg-item.unread{border-color:var(--primary); background:#f7fafc;}
.msg-head{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:8px;}
.msg-name{font-weight:700; color:var(--ink);}
.msg-meta{font-size:13px; color:var(--muted);}
.msg-body{color:var(--text); font-size:14px; white-space:pre-wrap;}
.msg-ops{display:flex; gap:16px; margin-top:10px;}

/* 响应式 */
@media (max-width:860px){
  .nav-toggle{display:block;}
  .site-nav{display:none; position:absolute; top:62px; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:6px 0;}
  .site-nav.open{display:flex;}
  .site-nav a{padding:12px 20px; border-bottom:1px solid var(--line);}
  .site-nav a.active::after{display:none;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .svc-card.offset{margin-top:0;}
  .intro{grid-template-columns:1fr; gap:22px;}
  .adv-list{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr; gap:22px;}
  .footer-grid{grid-template-columns:1fr; gap:18px;}
  .form-grid{grid-template-columns:1fr;}
  .hero{ min-height:300px; }
  .hero-text h1{font-size:26px;}
  .admin-side{display:none;}
}
@media (max-width:560px){
  .card-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
}