/* ==========================================================================
   cozunet.com · 建站服务总览页样式 css/pages/service.css
   骨架：左右分栏页首（大图 + 引言）→ 错落两列服务清单 → 对比表
         → 四角保障 → 手风琴 FAQ → 深棕联系带
   ========================================================================== */

/* ---------- 页首：左文右图 ---------- */
.page-hero{padding:150px 0 80px;background:linear-gradient(180deg,var(--brown-bg) 0%,var(--paper) 100%);border-bottom:1px solid var(--line-2)}
.page-hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.ph-copy .crumb{margin-bottom:34px}
.ph-copy h1{margin:16px 0 22px}
.ph-desc{color:var(--ink-2);font-size:16px;line-height:2;max-width:520px;margin-bottom:34px}
.ph-cta{display:flex;gap:14px;flex-wrap:wrap}
.ph-media{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(1.2deg)}
.ph-media img{width:100%;height:auto;object-fit:cover}
.ph-media figcaption{position:absolute;left:16px;bottom:14px;background:rgba(47,40,33,.72);color:#f3efe8;font-size:12.5px;letter-spacing:.06em;padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:860px){.page-hero-in{grid-template-columns:1fr;gap:36px}.page-hero{padding-top:120px}}

/* ---------- 服务清单：两列错落 ---------- */
.svc{padding:104px 0 40px}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.svc-col{display:grid;gap:18px}
.svc-col-offset{margin-top:64px}
.svc-item{
  display:flex;align-items:center;gap:22px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r);padding:24px 26px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.svc-item:hover{transform:translateX(8px);box-shadow:var(--shadow);border-color:var(--line)}
.svc-item:hover>svg{transform:translateX(4px)}
.svc-item>svg{width:20px;height:20px;color:var(--brown-soft);flex:none;transition:transform .35s var(--ease)}
.svc-idx{font-family:var(--font-serif);font-size:13px;color:var(--brown-soft);letter-spacing:.2em;flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.svc-item h3{font-size:18px;margin-bottom:6px}
.svc-item p{font-size:13.5px;color:var(--muted);line-height:1.8}
@media (max-width:820px){.svc-list{grid-template-columns:1fr}.svc-col-offset{margin-top:0}}

/* ---------- 对比表 ---------- */
.cmp{background:var(--card);padding:104px 0 90px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cmp-scroll{overflow-x:auto}
.cmp-scroll .tbl{min-width:640px}
.cmp td b{color:var(--ink)}
.cmp td:first-child{color:var(--brown-deep);font-weight:600}
.cmp-note{margin-top:26px;font-size:13.5px;color:var(--muted);text-align:center}

/* ---------- 服务保障：四角 ---------- */
.guar{padding:104px 0 60px}
.guar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.guar-item{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:34px 28px;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.guar-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.guar-big{position:absolute;top:16px;right:20px;font-family:var(--font-serif);font-size:44px;color:var(--brown-bg);font-weight:700;line-height:1}
.guar-item h3{font-size:17px;margin-bottom:10px;position:relative}
.guar-item p{font-size:13.5px;color:var(--ink-2);line-height:1.9;position:relative}
@media (max-width:900px){.guar-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guar-grid{grid-template-columns:1fr}}

/* ---------- FAQ 手风琴 ---------- */
.faq{padding:104px 0 60px}
.faq-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.faq-list{display:grid;gap:14px}
.faq-list details{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;transition:box-shadow .35s var(--ease)}
.faq-list details[open]{box-shadow:var(--shadow-sm)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:16px;height:16px;flex:none}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--brown);transition:transform .35s var(--ease)}
.faq-plus::before{left:0;right:0;top:7px;height:2px}
.faq-plus::after{top:0;bottom:0;left:7px;width:2px}
.faq-list details[open] .faq-plus::after{transform:scaleY(0)}
.faq-list details p{padding:0 22px 20px;font-size:14px;color:var(--ink-2);line-height:2}
.faq-list details p a{color:var(--brown);text-decoration:underline}
@media (max-width:860px){.faq-in{grid-template-columns:1fr;gap:34px}}

/* ---------- 联系 CTA ---------- */
.svc-cta{background:var(--brown);padding:80px 0}
.svc-cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.svc-cta-copy h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.svc-cta-copy p{color:rgba(255,255,255,.72);font-size:15px;letter-spacing:.04em}
.svc-cta-btns{display:flex;gap:16px;flex-wrap:wrap}