/* =====================================================================
   洛阳网站建设 · luoyang.css
   布局：左文右图主诉求 / 横向五步流程(连线圆点) / 模板站vs定制站对比表 / 两产业卡 / FAQ
   ===================================================================== */

/* ---------- 横幅 ---------- */
.banner-city{background-image:url('../images/banner-city.jpg')}

/* ---------- 主诉求 ---------- */
.ly-why{background:#fff}
.ly-why-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.ly-why-text h2{font-size:clamp(24px,2.8vw,34px);margin:0 0 18px;line-height:1.35}
.ly-why-text p{color:var(--c-text-2);margin-bottom:16px}
.ly-why-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover;width:100%}

/* ---------- 横向流程 ---------- */
.ly-steps{background:var(--c-ice-2)}
.ly-step-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.ly-step{
  background:#fff;border-radius:var(--radius-lg);padding:28px 22px;text-align:center;
  box-shadow:var(--shadow);position:relative;transition:all var(--trans);
}
.ly-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ly-step-dot{
  width:52px;height:52px;border-radius:50%;background:var(--c-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;
  margin:0 auto 16px;box-shadow:0 8px 18px rgba(37,99,235,.3);
}
.ly-step h3{font-size:17px;margin-bottom:8px}
.ly-step p{font-size:13.5px;color:var(--c-muted)}

/* ---------- 对比表 ---------- */
.ly-compare{background:#fff}
.ly-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ly-table{width:100%;border-collapse:collapse;background:#fff;min-width:640px}
.ly-table th,.ly-table td{padding:16px 22px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--c-line)}
.ly-table thead th{background:var(--c-primary);color:#fff;font-size:15.5px}
.ly-table thead th:nth-child(2){background:#475569}
.ly-table thead th:nth-child(3){background:var(--c-accent)}
.ly-table tbody tr:nth-child(even){background:var(--c-ice-2)}
.ly-table td:first-child{font-weight:700;color:var(--c-primary)}
.ly-table td:nth-child(2){color:var(--c-muted)}
.ly-table td:nth-child(3){color:var(--c-text)}
.ly-table-note{max-width:820px;margin:22px auto 0;text-align:center;color:var(--c-muted);font-size:14px}
.ly-table-note a{color:var(--c-accent);font-weight:600}

/* ---------- 产业两卡 ---------- */
.ly-industry{background:var(--c-ice-2)}
.ly-ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ly-ind-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--trans)}
.ly-ind-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.ly-ind-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.ly-ind-body{padding:28px 30px 30px}
.ly-ind-body h3{font-size:20px;margin-bottom:10px}
.ly-ind-body p{color:var(--c-text-2);font-size:14.5px;margin-bottom:18px}

/* ---------- FAQ ---------- */
.ly-faq{background:#fff}
.ly-faq-list{max-width:840px;margin:0 auto;display:grid;gap:13px}
.ly-faq-item{background:var(--c-ice-2);border-radius:12px;border-left:4px solid var(--c-accent);transition:all var(--trans)}
.ly-faq-item[open]{background:#fff;box-shadow:var(--shadow)}
.ly-faq-item summary{cursor:pointer;list-style:none;padding:17px 22px;font-weight:700;color:var(--c-primary);font-size:15.5px}
.ly-faq-item summary::-webkit-details-marker{display:none}
.ly-faq-item p{padding:0 22px 18px;color:var(--c-text-2);font-size:14.5px}

/* ---------- 城市 chips ---------- */
.ly-cities{background:var(--c-ice-2);padding-top:64px;padding-bottom:64px}
.ly-city-chips{display:flex;flex-wrap:wrap;gap:12px}
.ly-city-chips a{
  background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:10px 22px;
  font-weight:600;color:var(--c-text-2);transition:all var(--trans);
}
.ly-city-chips a:hover{background:var(--c-primary);color:#fff;border-color:transparent;transform:translateY(-3px)}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .ly-why-wrap,.ly-ind-grid{grid-template-columns:1fr;gap:36px}
  .ly-step-row{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ly-step-row{grid-template-columns:1fr}
}