/* ============================================================
   dksg.cn · index.html 首页专属样式
   布局：曲线柔化裁切 Banner + 键盘按键条 + 墨黑斜切优势带
   + 键帽岗位卡 + 折纸服务墙 + 竖排时间线 + 区域网格 + 资讯区
   ============================================================ */

/* ---------- 板块 1：全屏 Banner ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - 74px);
  display:flex; align-items:center;
  overflow:hidden;
  /* 曲线柔化裁切：底部波浪形收边 */
  clip-path:polygon(0 0,100% 0,100% 88%,97% 90.5%,92% 93.5%,85% 95.8%,76% 97.4%,66% 98.5%,54% 99.2%,42% 99.5%,31% 99.3%,21% 98.7%,13% 97.5%,7% 95.6%,3% 93.4%,1% 90.8%,0 88%);
}
.hero-bg{
  position:absolute; inset:0;
  background:url(../images/banner-home.jpg) center 30%/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg,rgba(28,26,23,.82) 0%,rgba(28,26,23,.55) 46%,rgba(28,26,23,.28) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-top:74px; padding-bottom:120px; max-width:1260px; margin:0 auto; width:100%; }
.hero-kbd{ margin-bottom:22px; background:rgba(242,232,213,.14); color:var(--cream); border-color:rgba(242,232,213,.35); box-shadow:0 3px 0 rgba(242,232,213,.25); }
.hero-title{ font-size:clamp(34px,5.2vw,62px); color:var(--cream); letter-spacing:2px; margin-bottom:20px; }
.hero-title span{ display:inline-block; margin-right:.28em; }
/* 文字动画：错峰上升 */
@keyframes riseUp{ from{ opacity:0; transform:translateY(36px); } to{ opacity:1; transform:none; } }
.hero-title .t1{ animation:riseUp .85s cubic-bezier(.2,.8,.3,1) .15s both; }
.hero-title .t2{ animation:riseUp .85s cubic-bezier(.2,.8,.3,1) .35s both; }
.hero-title .t3{ animation:riseUp .85s cubic-bezier(.2,.8,.3,1) .55s both; }
.hero-sub{
  max-width:660px; color:rgba(242,232,213,.86); font-size:16px; line-height:1.9; margin-bottom:34px;
  animation:riseUp .85s cubic-bezier(.2,.8,.3,1) .7s both;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; animation:riseUp .85s cubic-bezier(.2,.8,.3,1) .85s both; }
.hero-actions .btn{ padding:14px 32px; font-size:15.5px; }
.hero-actions .btn-ghost{ color:var(--cream); border-color:rgba(242,232,213,.5); }
.hero-actions .btn-ghost:hover{ border-color:var(--cream); color:var(--cream); }
.hero-contact{ color:rgba(242,232,213,.7); font-size:14px; animation:riseUp .85s cubic-bezier(.2,.8,.3,1) 1s both; }
.hero-contact a{ color:var(--tan); }
.hero-contact a:hover{ color:var(--cream); }
.hero-scroll{
  position:absolute; left:50%; bottom:52px; transform:translateX(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(242,232,213,.45);
  animation:drop 1.8s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{ transform:translate(-50%,0); opacity:.85; } 50%{ transform:translate(-50%,10px); opacity:.4; } }

/* ---------- 板块 2：快速入口（键盘按键条） ---------- */
.quick{ padding:86px 0 70px; }
.quick-head{ text-align:center; margin-bottom:40px; }
.quick-head h2{ font-size:32px; margin:14px 0 8px; }
.quick-head p{ color:var(--brown-3); font-size:15px; }
.quick-keys{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.quick-keys li a{
  display:block; padding:26px 16px 24px; text-align:center;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 5px 0 var(--line-2), inset 0 -3px 0 rgba(0,0,0,.04);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.quick-keys li a:hover{ transform:translateY(-4px); box-shadow:0 9px 0 var(--line-2), inset 0 -3px 0 rgba(0,0,0,.04); background:var(--paper-3); }
.quick-keys li a b{ display:block; font-family:var(--font-head); font-size:17px; color:var(--ink); margin-bottom:6px; }
.quick-keys li a span{ font-size:12.5px; color:var(--brown-3); }
.quick-region{ margin-top:26px; }
.quick-region a{
  display:block; text-align:center; padding:15px 20px;
  background:var(--ink); color:var(--cream); border-radius:12px; font-size:15px; letter-spacing:1px;
  transition:background .25s ease;
}
.quick-region a:hover{ background:var(--brown); color:var(--cream); }

/* ---------- 板块 3：核心优势（墨黑斜切带） ---------- */
.edge{
  background:var(--ink); color:rgba(242,232,213,.82);
  clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);
  padding:110px 0 100px;
}
.edge-head{ text-align:center; margin-bottom:48px; }
.edge-head .keycap{ background:rgba(242,232,213,.1); color:var(--tan); border-color:rgba(242,232,213,.3); box-shadow:0 3px 0 rgba(242,232,213,.2); }
.edge-head h2{ color:var(--cream); font-size:32px; margin-top:16px; }
.edge-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.edge-list li{
  background:linear-gradient(180deg,#2B2721,#211D18);
  border:1px solid #3B342C; border-radius:16px; padding:30px 24px 28px;
  box-shadow:0 6px 0 #0F0D0B;
  transition:transform .25s ease,border-color .25s ease;
}
.edge-list li:hover{ transform:translateY(-5px); border-color:var(--brown-3); }
.edge-no{ display:block; font-family:var(--font-mono); font-size:26px; color:var(--tan); margin-bottom:12px; letter-spacing:2px; }
.edge-list h3{ color:var(--cream); font-size:19px; margin-bottom:10px; }
.edge-list p{ font-size:13.8px; line-height:1.85; color:rgba(242,232,213,.68); }

/* ---------- 板块 4：八大员岗位导览 ---------- */
.posts{ padding:96px 0 40px; }
.sec-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:38px; }
.sec-top h2{ font-size:30px; }
.sec-top .more{ margin-left:auto; color:var(--brown-2); font-size:14.5px; font-weight:600; }
.sec-top .more:hover{ color:var(--ink); }
.posts-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.posts-grid li a{
  display:flex; flex-direction:column; gap:8px;
  padding:26px 22px; border-radius:14px;
  background:var(--paper-2); border:1px solid var(--line);
  box-shadow:0 5px 0 var(--line), inset 0 -3px 0 rgba(0,0,0,.04);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.posts-grid li a:hover{ transform:translateY(-4px); box-shadow:0 9px 0 var(--line); background:var(--paper-3); }
.p-no{ font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--tan); letter-spacing:1px; }
.posts-grid li b{ font-family:var(--font-head); font-size:19px; color:var(--ink); }
.posts-grid li span{ font-size:13px; color:var(--brown-3); }

/* ---------- 板块 5：资质服务全景（折纸式卡片墙） ---------- */
.svc{ padding:70px 0 40px; }
.svc-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card{
  position:relative; display:block; padding:30px 24px 34px; border-radius:18px;
  background:var(--paper-2); border:1px solid var(--line);
  /* 折纸角：右上角轻微折角 */
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  transition:transform .25s ease,box-shadow .25s ease;
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.svc-dark{ background:var(--ink); border-color:var(--ink); clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); }
.svc-tag{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:2px; color:var(--brown-3); margin-bottom:14px; }
.svc-dark .svc-tag{ color:var(--tan); }
.svc-card h3{ font-size:19px; margin-bottom:10px; color:var(--ink); }
.svc-dark h3{ color:var(--cream); }
.svc-card p{ font-size:13.5px; color:var(--brown-3); line-height:1.8; }
.svc-dark p{ color:rgba(242,232,213,.7); }

/* ---------- 板块 6：服务流程（竖排时间线） ---------- */
.flow{
  background:var(--paper-3);
  clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);
  padding:110px 0 96px;
}
.flow-line{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.flow-line li{
  position:relative; padding:26px 20px 24px; border-radius:14px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .25s ease;
}
.flow-line li:hover{ transform:translateY(-4px); }
.flow-line li b{ display:block; font-family:var(--font-mono); font-size:22px; color:var(--tan); margin-bottom:10px; }
.flow-line li h3{ font-size:16.5px; margin-bottom:8px; }
.flow-line li p{ font-size:12.8px; color:var(--brown-3); line-height:1.8; }

/* ---------- 板块 7：区域覆盖 ---------- */
.region{ padding:96px 0 70px; }
.region-inner{ display:grid; grid-template-columns:1fr 1.5fr; gap:44px; align-items:center; }
.region-head h2{ font-size:30px; margin:14px 0 10px; }
.region-head p{ color:var(--brown-3); font-size:14.5px; margin-bottom:24px; line-height:1.9; }
.region-map{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.region-map li a{
  display:block; text-align:center; padding:14px 8px; font-size:14.5px; font-weight:600;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:10px;
  box-shadow:0 4px 0 var(--line-2);
  transition:transform .2s ease,background .2s ease;
}
.region-map li a:hover{ transform:translateY(-3px); background:var(--paper-3); color:var(--brown-2); }

/* ---------- 板块 8：案例摘选 ---------- */
.cases{ padding:60px 0 90px; }
.cases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card{
  display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.case-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.case-card figure{ aspect-ratio:16/9; overflow:hidden; }
.case-card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.case-card:hover figure img{ transform:scale(1.05); }
.case-body{ padding:20px 22px 24px; }
.case-body .keycap{ margin-bottom:12px; }
.case-body h3{ font-size:17px; margin-bottom:8px; line-height:1.5; }
.case-body p{ font-size:13.5px; color:var(--brown-3); line-height:1.85; }

/* ---------- 板块 9：政策速览 ---------- */
.policy{
  background:var(--paper-2);
  clip-path:polygon(0 0,100% 3%,100% 97%,0 100%);
  padding:100px 0 96px;
}
.policy-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.policy-list li a{
  display:flex; align-items:baseline; gap:18px;
  padding:20px 24px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-sm);
  transition:transform .22s ease,border-color .22s ease;
}
.policy-list li a:hover{ transform:translateX(6px); border-color:var(--brown-3); }
.policy-list li b{ font-family:var(--font-head); font-size:16.5px; color:var(--ink); flex:none; }
.policy-list li span{ font-size:13.5px; color:var(--brown-3); }

/* ---------- 板块 10：报考关键信息速查 ---------- */
.fastinfo{ padding:96px 0 20px; }
.fast-table-wrap{ overflow-x:auto; }
.fast-table{ table-layout:fixed; }
.fast-table col.c1{ width:14%; }
.fast-table col.c2{ width:48%; }
.fast-table col.c3{ width:38%; }
.fast-table th{ font-family:var(--font-head); }
.fast-note{ margin-top:18px; font-size:13.8px; color:var(--brown-3); line-height:1.9; }
.fast-note a{ color:var(--brown-2); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.fast-note a:hover{ color:var(--ink); }

/* ---------- 板块 10.5：企业常问一句话快答 ---------- */
.quickfaq{ padding:96px 0 10px; }
.quickfaq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.qf-item{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:0 20px; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  transition:box-shadow .3s ease;
}
.qf-item:hover{ box-shadow:var(--shadow-sm); }
.qf-item summary{
  cursor:pointer; list-style:none; padding:18px 0; font-family:var(--font-head);
  font-size:15.5px; color:var(--ink-2); display:flex; align-items:center; gap:12px;
}
.qf-item summary::before{
  content:"Q"; flex:none; width:30px; height:30px; border-radius:8px;
  background:var(--brown-2); color:var(--cream); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 0 var(--brown);
}
.qf-item summary::-webkit-details-marker{ display:none; }
.qf-item summary::after{
  content:""; margin-left:auto; flex:none; width:9px; height:9px;
  border-right:2px solid var(--brown-3); border-bottom:2px solid var(--brown-3);
  transform:rotate(45deg); transition:transform .3s ease;
}
.qf-item[open] summary::after{ transform:rotate(225deg); }
.qf-item p{
  font-size:13.8px; color:var(--brown-3); line-height:1.9;
  padding:0 0 18px 42px;
}

/* ---------- 板块 10.6：洛阳本地服务实录 ---------- */
.diary{ padding:96px 0 20px; }
.diary-inner{ display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
.diary-head{ position:sticky; top:110px; }
.diary-head h2{ font-size:26px; line-height:1.45; margin-top:14px; }
.diary-col{ display:flex; flex-direction:column; gap:22px; }
.diary-col p{
  background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--brown-3);
  border-radius:0 14px 14px 0; padding:22px 24px; font-size:14.2px; color:var(--brown-3); line-height:2;
}
.diary-col p b{ display:block; font-family:var(--font-head); font-size:15.5px; color:var(--ink); margin-bottom:6px; }

/* ---------- 板块 11：资讯动态（首页文章列表区） ---------- */
.news{ padding:96px 0 30px; }
.news-zone{ display:grid; grid-template-columns:3fr 1.45fr; gap:34px; align-items:start; }
.news-title{
  font-size:18px; color:var(--brown-2); letter-spacing:1px;
  padding-bottom:10px; border-bottom:3px solid var(--brown-3); margin-bottom:20px;
  display:inline-block;
}
.nl-item{ display:flex; gap:18px; padding:16px 0; border-bottom:1px dashed var(--line); }
.nl-item:last-child{ border-bottom:0; }
.nl-pic{ flex:none; width:200px; height:130px; overflow:hidden; border-radius:10px; }
.nl-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.nl-item:hover .nl-pic img{ transform:scale(1.06); }
.nl-body h4{ font-size:16.5px; margin-bottom:6px; }
.nl-body h4 a:hover{ color:var(--brown-3); }
.nl-body p{ font-size:13.5px; color:var(--brown-3); line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nl-body time{ display:inline-block; margin-top:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--tan); }
.news-side{ display:flex; flex-direction:column; gap:26px; }
.ns-block{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:22px 22px 10px; }
.ns-block .news-title{ font-size:15.5px; border-bottom-width:2px; }
.ns-item{ padding:12px 0; border-bottom:1px dashed var(--line); }
.ns-item:last-child{ border-bottom:0; }
.ns-item h4{ font-size:14.5px; line-height:1.5; margin-bottom:4px; }
.ns-item h4 a:hover{ color:var(--brown-3); }
.ns-item p{ font-size:12.8px; color:var(--brown-3); line-height:1.7; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ns-item time{ display:inline-block; margin-top:4px; font-family:var(--font-mono); font-size:11.5px; color:var(--tan); }

/* ---------- 板块 12：底部 CTA ---------- */
.cta{
  background:var(--ink);
  clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);
  padding:110px 0 90px;
}
.cta-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:30px; justify-content:space-between; }
.cta-text .keycap{ background:rgba(242,232,213,.1); color:var(--tan); border-color:rgba(242,232,213,.3); }
.cta-text h2{ color:var(--cream); font-size:30px; margin:14px 0 10px; }
.cta-text p{ color:rgba(242,232,213,.7); font-size:15px; max-width:640px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-lg{ padding:16px 36px; font-size:16px; }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .quick-keys{ grid-template-columns:repeat(3,1fr); }
  .edge-list{ grid-template-columns:repeat(2,1fr); }
  .posts-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-wall{ grid-template-columns:repeat(2,1fr); }
  .flow-line{ grid-template-columns:repeat(3,1fr); }
  .region-inner{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr; }
  .news-zone{ grid-template-columns:1fr; }
  .quickfaq-grid{ grid-template-columns:1fr; }
  .diary-inner{ grid-template-columns:1fr; }
  .diary-head{ position:static; }
}
@media (max-width:640px){
  .quick-keys{ grid-template-columns:repeat(2,1fr); }
  .edge-list{ grid-template-columns:1fr; }
  .posts-grid{ grid-template-columns:1fr; }
  .svc-wall{ grid-template-columns:1fr; }
  .flow-line{ grid-template-columns:1fr; }
  .region-map{ grid-template-columns:repeat(2,1fr); }
  .policy-list{ grid-template-columns:1fr; }
  .nl-item{ flex-direction:column; }
  .nl-pic{ width:100%; height:auto; aspect-ratio:16/9; }
  .cta-inner{ justify-content:center; text-align:center; }
  .cta-actions{ justify-content:center; }
  .hero{ clip-path:polygon(0 0,100% 0,100% 94%,96% 95.5%,90% 96.8%,80% 97.8%,68% 98.6%,55% 99.1%,42% 99.4%,30% 99.2%,20% 98.6%,12% 97.4%,6% 95.7%,2% 93.6%,0 91%); }
}