/* ============================================================
   Omseek · inner pages — page-level components
   特性卡 / 案例 / 长文 / 资源列表 / 联系表单 / 子导航
   ============================================================ */

/* ---------------- sub navigation pills ---------------- */
.subnav{display:flex;gap:9px;flex-wrap:wrap;margin-top:32px}
.subnav a{
  display:inline-flex;align-items:center;
  padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.75);
  font-size:13px;font-weight:500;color:var(--mk-blue-037a);
  transition:transform .25s var(--ease),border-color .25s,color .25s,background .25s,box-shadow .25s;
}
.subnav a:hover{transform:translateY(-2px);color:var(--blue);border-color:rgba(37,99,255,.4);background:var(--white);box-shadow:0 8px 20px -12px rgba(20,40,80,.35)}

/* ---------------- feature grid ---------------- */
.featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{
  position:relative;min-height:262px;padding:32px;border:1px solid var(--line);border-radius:20px;
  background:var(--white);box-shadow:0 1px 2px rgba(13,25,42,.04);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.feature:hover{transform:translateY(-5px);box-shadow:var(--sh-pop);border-color:var(--line)}
.feature.wide{grid-column:span 2}
.feature.darkcard{
  color:var(--white);border-color:rgba(255,255,255,.09);
  background:linear-gradient(160deg,var(--navy),var(--mk-blue-019));
  box-shadow:0 26px 60px -34px rgba(7,17,31,.8);
}
.feature.darkcard:hover{border-color:rgba(111,240,207,.3)}
.feature .num{
  display:block;font:500 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--mk-blue-058);
}
.feature.darkcard .num{color:var(--mk-blue-064b)}
.feature h3{margin:52px 0 12px;font:600 23px/1.15 var(--font-display);letter-spacing:-.025em}
.feature p{margin:0;line-height:1.8;color:var(--muted);font-size:14px}
.feature.darkcard p{color:var(--mk-blue-072)}

/* ---------------- long-form editorial ---------------- */
.editorial{display:grid;grid-template-columns:.68fr 1.32fr;gap:72px}
.toc{position:sticky;top:108px;align-self:start}
.toc .kicker{margin-bottom:14px}
.toc a{
  display:flex;align-items:center;gap:8px;
  padding:14px 2px;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--muted);transition:color .25s,gap .25s var(--ease),padding-left .25s var(--ease);
}
.toc a:hover{color:var(--blue);gap:12px;padding-left:4px}
.article h2{margin:0 0 24px;font:600 clamp(30px,3.4vw,42px)/1.14 var(--font-display);letter-spacing:-.035em;scroll-margin-top:108px}
.article h3{margin:52px 0 18px;font:600 24px/1.25 var(--font-display);letter-spacing:-.02em;scroll-margin-top:108px}
.article p,.article li{color:#556578;line-height:1.9;font-size:15.5px}
.article blockquote{
  position:relative;margin:40px 0;padding:34px 38px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,var(--mk-blue-097),var(--mk-teal-094));overflow:hidden;
  font:500 20px/1.65 var(--font-display);letter-spacing:-.01em;color:var(--mk-blue-019a);
}
.article blockquote::after{
  content:"\201C";position:absolute;right:24px;top:-10px;
  font:700 110px/1 var(--font-display);color:rgba(37,99,255,.10);
}
.article .btn{margin-top:14px}

/* ---------------- case cards ---------------- */
.casegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.case{
  display:block;min-height:308px;padding:36px;border-radius:22px;
  background:var(--white);border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.case:hover{transform:translateY(-5px);box-shadow:var(--sh-pop);border-color:var(--line)}
.case:nth-child(2){background:var(--mk-teal-094)}
.case:nth-child(3){background:#efedff}
.case:nth-child(4){background:var(--mk-warm-096)}
.case:nth-child(2):hover,.case:nth-child(3):hover,.case:nth-child(4):hover{border-color:var(--line)}
.case h3{margin:62px 0 12px;font:600 29px/1.15 var(--font-display);letter-spacing:-.03em}
.case p{margin:0;color:var(--muted);line-height:1.8;font-size:14px}

/* ---------------- resource rows ---------------- */
.resource-list{display:grid;gap:12px}
.resource{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center;
  padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:var(--white);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.resource:hover{transform:translateY(-3px);box-shadow:var(--sh-card);border-color:var(--line)}
.resource b{font:600 18px/1.2 var(--font-display);letter-spacing:-.015em}
.resource p{margin:6px 0 0;font-size:13px;color:var(--mk-blue-050)}
.resource>span:last-child{
  font:500 12px/1 var(--font-mono);color:var(--mk-blue-058);white-space:nowrap;
  transition:color .25s,transform .25s var(--ease);
}
.resource:hover>span:last-child{color:var(--blue);transform:translate(2px,-2px)}

/* ---------------- contact ---------------- */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contactcard{padding:40px;border:1px solid var(--line);border-radius:22px;background:var(--white);box-shadow:0 1px 2px rgba(13,25,42,.04)}
.contactcard h2{margin:14px 0 26px;font:600 clamp(30px,3.2vw,40px)/1.12 var(--font-display);letter-spacing:-.035em}
.contactcard.ondark{
  color:var(--white);border-color:rgba(255,255,255,.09);
  background:linear-gradient(160deg,var(--navy),var(--mk-blue-016));
  box-shadow:0 30px 70px -40px rgba(7,17,31,.8);
}
.contactcard.ondark h2{color:var(--white)}
.contactcard.ondark .kicker{color:var(--mk-blue-064b)}
.contactcard.ondark p{color:var(--mk-blue-072)}
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-size:12px;font-weight:600;color:#3c4c5d}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--mk-blue-083);border-radius:12px;padding:14px 16px;
  background:var(--white);color:var(--navy);font-size:14px;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:rgba(37,99,255,.55);background:var(--white);box-shadow:var(--ring);
}
.field textarea{min-height:130px;resize:vertical}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .featuregrid{grid-template-columns:1fr 1fr}
  .feature.wide{grid-column:span 2}
  .editorial{grid-template-columns:1fr;gap:44px}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .toc .kicker{width:100%;margin-bottom:6px}
  .toc a{border-bottom:0;padding:8px 13px;border:1px solid var(--line);border-radius:99px;font-size:12.5px}
  .casegrid,.contactgrid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .featuregrid{grid-template-columns:1fr}
  .feature.wide{grid-column:auto}
  .feature{min-height:0;padding:28px}
  .feature h3{margin-top:38px}
  .case{min-height:0;padding:28px}
  .case h3{margin-top:40px;font-size:25px}
  .resource{grid-template-columns:1fr;gap:12px;padding:22px}
  .resource>span:last-child{justify-self:start}
  .contactcard{padding:30px 26px}
  .article blockquote{padding:28px 24px;font-size:17.5px}
}