/* ============================================================
   sgscpa.com — 盛工财税建服  COMPONENTS
   硬朗折线柔性分割 · 科技蓝 + 冰蓝渐变 · 纯白
   ============================================================ */

/* ==================== 1. page-hero ==================== */
.page-hero{
  position:relative;
  padding-top:calc(var(--nav-h) + 80px);
  padding-bottom:60px;
  background:var(--ice-grad);
  text-align:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:48px;
  background:var(--white);
  clip-path:polygon(0 50%,4% 20%,8% 50%,12% 80%,16% 50%,20% 20%,24% 50%,28% 80%,32% 50%,36% 20%,40% 50%,44% 80%,48% 50%,52% 20%,56% 50%,60% 80%,64% 50%,68% 20%,72% 50%,76% 80%,80% 50%,84% 20%,88% 50%,92% 80%,96% 50%,100% 20%,100% 100%,0 100%);
}
.page-hero .eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--blue-600);
  background:rgba(0,82,217,.08);
  padding:6px 14px;
  border-radius:var(--r-pill);
  margin-bottom:18px;
}
.page-hero h1{
  font-size:34px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
}
.page-hero p{
  font-size:15px;
  color:var(--muted);
  max-width:620px;
  margin-inline:auto;
}

/* ==================== 2. news-item ==================== */
.news-item{
  display:flex;
  gap:20px;
  padding:18px;
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.news-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.news-item .n-thumb{
  flex-shrink:0;
  width:240px;
  height:160px;
  border-radius:var(--r-md);
  overflow:hidden;
}
.news-item .n-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.news-item:hover .n-thumb img{
  transform:scale(1.05);
}
.news-item .n-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.news-item .n-body h4{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.45;
  transition:color .2s var(--ease);
}
.news-item:hover .n-body h4{
  color:var(--blue-600);
}
.news-item .n-excerpt{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-item .n-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  font-size:13px;
}
.news-item .n-date{
  color:var(--muted);
}
.news-item .n-readmore{
  color:var(--blue-600);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.news-item .n-readmore::after{
  content:"→";
  transition:transform .2s var(--ease);
}
.news-item:hover .n-readmore::after{
  transform:translateX(3px);
}

/* ==================== 3. news-page-grid ==================== */
.news-page-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:30px;
  align-items:start;
}
@media(max-width:960px){
  .news-page-grid{
    grid-template-columns:1fr;
  }
}

/* ==================== 4. side-card ==================== */
.side-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.side-card + .side-card{
  margin-top:20px;
}
.side-card h4{
  font-size:16px;
  font-weight:700;
  color:var(--blue-700);
  border-bottom:1px solid var(--ice-200);
  padding-bottom:10px;
  margin-bottom:12px;
}
.side-card ul{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.side-card ul li a{
  display:block;
  font-size:14px;
  color:var(--body);
  padding:6px 0;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
  position:relative;
}
.side-card ul li a::before{
  content:"";
  display:inline-block;
  width:4px;height:4px;
  background:var(--blue-400);
  border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
  opacity:.5;
  transition:opacity .2s var(--ease);
}
.side-card ul li a:hover{
  color:var(--blue-600);
  padding-left:4px;
}
.side-card ul li a:hover::before{
  opacity:1;
}

/* ==================== 5. news-mini + mini-item ==================== */
.news-mini{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mini-item{
  display:flex;
  gap:12px;
}
.mini-item .m-thumb{
  flex-shrink:0;
  width:84px;
  height:64px;
  border-radius:var(--r-sm);
  overflow:hidden;
}
.mini-item .m-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s var(--ease);
}
.mini-item:hover .m-thumb img{
  transform:scale(1.06);
}
.mini-item .m-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mini-item .m-body h5{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.45;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .2s var(--ease);
}
.mini-item:hover .m-body h5{
  color:var(--blue-600);
}
.mini-item .m-date{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* ==================== 6. side-cta-card ==================== */
.side-cta-card{
  background:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-500) 100%);
  border-radius:var(--r-lg);
  padding:22px;
  color:var(--white);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.side-cta-card::before{
  content:"";
  position:absolute;
  top:-40px;right:-40px;
  width:140px;height:140px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.side-cta-card::after{
  content:"";
  position:absolute;
  bottom:-30px;left:-30px;
  width:100px;height:100px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
.side-cta-card h4{
  font-size:17px;
  font-weight:700;
  color:var(--white);
  margin-bottom:8px;
  position:relative;
}
.side-cta-card p{
  font-size:13px;
  opacity:.9;
  margin-bottom:16px;
  line-height:1.6;
  position:relative;
}
.side-cta-card .btn{
  display:block;
  width:100%;
  background:var(--white);
  color:var(--blue-600);
  font-size:14px;
  font-weight:600;
  padding:10px 0;
  border-radius:var(--r-pill);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  position:relative;
}
.side-cta-card .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* ==================== 7. article-wrap ==================== */
.article-wrap{
  max-width:800px;
  margin-inline:auto;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:36px;
  box-shadow:var(--shadow-sm);
}
@media(max-width:640px){
  .article-wrap{
    padding:22px;
  }
}
.article-head{
  margin-bottom:30px;
  padding-bottom:22px;
  border-bottom:1px solid var(--ice-200);
}
.article-head h1{
  font-size:26px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:14px;
  line-height:1.4;
}
.article-meta{
  display:flex;
  gap:20px;
  font-size:13px;
  color:var(--muted);
  flex-wrap:wrap;
}
.article-content{
  font-size:16px;
  line-height:1.9;
  color:var(--body);
}
.article-content p{
  margin-bottom:1.2em;
}
.article-content h2,.article-content h3{
  margin-top:1.8em;
  margin-bottom:.6em;
}
.article-content img{
  width:100%;
  border-radius:var(--r-md);
  margin:20px 0;
}
.article-content ul,.article-content ol{
  padding-left:1.4em;
  margin-bottom:1em;
}
.article-content ul li,.article-content ol li{
  margin-bottom:.4em;
}
.article-content blockquote{
  border-left:3px solid var(--blue-500);
  padding:12px 18px;
  background:var(--ice-50);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--body);
  margin:18px 0;
}
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.article-tags .tag{
  font-size:12px;
  color:var(--blue-600);
  background:var(--ice-100);
  padding:5px 12px;
  border-radius:var(--r-pill);
}
.article-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--ice-200);
  gap:16px;
  flex-wrap:wrap;
}

/* ==================== 8. faq-item ==================== */
.faq-item{
  background:var(--white);
  border-radius:var(--r-md);
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .28s var(--ease);
}
.faq-item:hover{
  box-shadow:var(--shadow-md);
}
.faq-q{
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
  font-size:15px;
  user-select:none;
  transition:background .2s var(--ease);
}
.faq-q:hover{
  background:var(--ice-50);
}
.faq-q::after{
  content:"▼";
  font-size:11px;
  color:var(--blue-500);
  transition:transform .3s var(--ease);
  flex-shrink:0;
  margin-left:14px;
}
.faq-a{
  max-height:0;
  overflow:hidden;
  padding:0 22px;
  transition:max-height .35s var(--ease),padding .35s var(--ease);
  color:var(--body);
  font-size:14px;
  line-height:1.8;
}
.faq-item.open .faq-q{
  color:var(--blue-700);
}
.faq-item.open .faq-q::after{
  transform:rotate(180deg);
}
.faq-item.open .faq-a{
  max-height:500px;
  padding:0 22px 18px;
}

/* ==================== 9. cat-card ==================== */
.cat-card{
  position:relative;
  background:var(--white);
  border-radius:var(--r-xl);
  padding:28px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  overflow:hidden;
}
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.cat-card .cat-ico{
  width:48px;height:48px;
  border-radius:var(--r-md);
  background:var(--ice-100);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-600);
  margin-bottom:18px;
  font-size:22px;
}
.cat-card h4{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.cat-card p{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:28px;
}
.cat-card .cat-link{
  position:absolute;
  bottom:18px;right:22px;
  font-size:13px;
  font-weight:600;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cat-card .cat-link::after{
  content:"→";
  transition:transform .2s var(--ease);
}
.cat-card:hover .cat-link::after{
  transform:translateX(3px);
}

/* ==================== 10. case-card ==================== */
.case-card{
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.case-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.case-card .case-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
}
.case-card .case-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.case-card:hover .case-thumb img{
  transform:scale(1.06);
}
.case-card .case-body{
  padding:18px;
}
.case-card h4{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.45;
}
.case-card .case-tag{
  display:inline-block;
  font-size:12px;
  color:var(--blue-600);
  background:var(--ice-100);
  padding:4px 10px;
  border-radius:var(--r-pill);
  margin-bottom:8px;
}

/* ==================== 11. service-card ==================== */
.service-card{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:28px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.service-card.svc-icon-top{
  flex-direction:column;
  text-align:center;
  align-items:center;
}
.service-card .svc-ico{
  flex-shrink:0;
  width:56px;height:56px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400));
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.service-card .svc-body{
  flex:1;
  min-width:0;
}
.service-card h4{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
.service-card p{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:14px;
}
.service-card .svc-features{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
}
.service-card .svc-features span{
  font-size:12px;
  color:var(--blue-600);
  background:var(--ice-50);
  padding:4px 10px;
  border-radius:var(--r-sm);
}
.service-card .svc-link{
  font-size:14px;
  font-weight:600;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.service-card .svc-link::after{
  content:"→";
  transition:transform .2s var(--ease);
}
.service-card:hover .svc-link::after{
  transform:translateX(3px);
}

/* ==================== 12. team-card ==================== */
.team-card{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:28px 20px 22px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.team-card .team-avatar{
  width:110px;height:110px;
  border-radius:50%;
  overflow:hidden;
  margin-inline:auto 16px;
  border:3px solid var(--ice-100);
  transition:border-color .3s var(--ease);
}
.team-card:hover .team-avatar{
  border-color:var(--blue-300);
}
.team-card .team-avatar img{
  width:100%;height:100%;object-fit:cover;
}
.team-card h5{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.team-card .team-role{
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}
.team-card .team-soc{
  display:flex;
  justify-content:center;
  gap:10px;
}
.team-card .team-soc a{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--ice-50);
  color:var(--blue-600);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.team-card .team-soc a:hover{
  background:var(--blue-600);
  color:var(--white);
}

/* ==================== 13. contact-form ==================== */
.contact-form{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.contact-form .form-row{
  display:flex;
  gap:16px;
}
.contact-form .form-row > *{
  flex:1;
}
@media(max-width:640px){
  .contact-form .form-row{
    flex-direction:column;
  }
}
.contact-form .form-group{
  margin-bottom:16px;
}
.contact-form label{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.contact-form label .req{
  color:var(--err);
  margin-left:3px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid #E0E8F5;
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:14px;
  color:var(--body);
  background:var(--white);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(22,119,255,.12);
}
.contact-form textarea{
  min-height:140px;
  resize:vertical;
}
.contact-form .form-submit{
  width:100%;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-500));
  color:var(--white);
  font-size:15px;
  font-weight:600;
  padding:14px 0;
  border-radius:var(--r-md);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  cursor:pointer;
}
.contact-form .form-submit:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}

/* ==================== 14. breadcrumb ==================== */
.breadcrumb{
  padding:16px 0;
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.breadcrumb a{
  color:var(--muted);
  transition:color .2s var(--ease);
}
.breadcrumb a:hover{
  color:var(--blue-600);
}
.breadcrumb .sep{
  color:#D0DCEB;
  margin:0 2px;
}
.breadcrumb .current{
  color:var(--ink);
  font-weight:600;
}

/* ==================== 15. stat-num ==================== */
.stat-num{
  text-align:center;
}
.stat-num strong{
  display:block;
  font-size:36px;
  font-weight:700;
  color:var(--blue-600);
  line-height:1.1;
  letter-spacing:-.5px;
}
.stat-num span{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
}