/* ============================================================
   service-responsive.css — 响应式网站页
   布局特征：左文右图 hero / CSS 三档设备框 / 编号步骤卡
   ============================================================ */

/* ---------- 1. Hero ---------- */
.rs-hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;padding:150px 0 90px}
.rs-hero-bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center;z-index:0}
.rs-hero-veil{position:absolute;inset:0;background:linear-gradient(115deg,rgba(20,20,20,.93) 0%,rgba(20,20,20,.78) 50%,rgba(20,20,20,.45) 100%);z-index:1}
.rs-hero-inner{position:relative;z-index:2}
.rs-crumb{font-size:13px;color:#C9BFAE;margin-bottom:32px;letter-spacing:.04em}
.rs-crumb a{color:#DFC69B}
.rs-crumb a:hover{color:#fff}
.rs-crumb span{margin:0 8px;opacity:.6}
.rs-crumb em{font-style:normal;color:#fff}
.rs-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.rs-hero-title{color:#fff;font-size:clamp(34px,4.8vw,58px);font-weight:900;line-height:1.2;margin-bottom:22px}
.rs-gold{background:var(--grad-coffee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rs-hero-sub{color:#D5CDBE;font-size:16px;line-height:1.9;margin-bottom:32px;max-width:520px}
.rs-hero-cta{display:flex;flex-wrap:wrap;gap:16px}
.rs-hero-fig img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* ---------- 2. 三档设备框 ---------- */
.rs-devices{display:grid;grid-template-columns:1.25fr .9fr .6fr;gap:30px;align-items:end;max-width:900px;margin:0 auto}
.rs-dev{text-align:center}
.rs-dev-bar{height:10px;background:var(--ink);border-radius:6px 6px 0 0;margin:0 auto}
.rs-dev-body{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:18px;box-shadow:var(--shadow-md);margin-bottom:20px;display:flex;flex-direction:column;gap:8px;min-height:230px}
.rs-dev-body i{background:var(--coffee-bg);border-radius:6px}
.rs-desktop .rs-dev-body i:nth-child(1){height:38%}
.rs-desktop .rs-dev-body i:nth-child(2){height:26%}
.rs-desktop .rs-dev-body i:nth-child(3){height:26%}
.rs-tablet .rs-dev-body i{height:32%}
.rs-phone .rs-dev-body i{flex:1}
.rs-dev b{display:block;font-size:15px;margin-bottom:6px}
.rs-dev p{font-size:12.5px;color:var(--text-2)}

/* ---------- 3. 优势图文 ---------- */
.rs-adv{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.rs-adv-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.rs-adv-list{margin-top:28px}
.rs-adv-list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rs-adv-list li b{white-space:nowrap;font-size:15px;padding-top:2px}
.rs-adv-list li span{font-size:14px;color:var(--text-2);line-height:1.8}

/* ---------- 4. 数据条 ---------- */
.rs-stats{background:var(--ink);padding:70px 0}
.rs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.rs-stat b{display:block;font-size:clamp(36px,4.2vw,54px);font-weight:900;color:var(--coffee-bright);line-height:1.1}
.rs-stat span{color:#B7AE9E;font-size:13px;margin-top:8px;display:block}

/* ---------- 5. 四步流程卡 ---------- */
.rs-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rs-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:32px 26px;text-align:center;transition:transform .35s}
.rs-step:hover{transform:translateY(-6px)}
.rs-step-num{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--grad-ink);color:var(--coffee-bright);font-size:22px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--coffee)}
.rs-step h3{font-size:16px;margin-bottom:8px}
.rs-step p{font-size:13px;color:var(--text-2);line-height:1.8}

/* ---------- 6. FAQ ---------- */
.rs-faq-wrap{max-width:860px}
.rs-faq{border-top:1px solid var(--line);background:#fff;border-radius:var(--radius-md);padding:0 32px;box-shadow:var(--shadow-sm)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:none}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;font-size:16px;font-weight:700;color:var(--ink);padding:22px 4px;cursor:pointer}
.acc-arrow{width:13px;height:13px;border-right:2px solid var(--coffee-deep);border-bottom:2px solid var(--coffee-deep);transform:rotate(45deg);flex-shrink:0;transition:transform .35s;margin-top:-5px}
.acc-item.open .acc-arrow{transform:rotate(225deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc-panel p{padding:0 4px 22px;color:var(--text-2);font-size:14px;line-height:1.9}
.acc-panel a{color:var(--coffee-deep);font-weight:600}

/* ---------- 7. CTA ---------- */
.rs-cta{background:linear-gradient(135deg,#F6F0E6,#EFE5D3);padding:120px 0;text-align:center}
.rs-cta-inner{max-width:680px;margin:0 auto}
.rs-cta-title{font-size:clamp(26px,3.8vw,42px);font-weight:900;margin-bottom:16px}
.rs-cta-sub{color:var(--text-2);font-size:15.5px;line-height:1.9;margin-bottom:34px}
.rs-cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .rs-hero-grid{grid-template-columns:1fr;gap:40px}
  .rs-devices{grid-template-columns:1fr;max-width:420px}
  .rs-dev-body{min-height:0}
  .rs-adv{grid-template-columns:1fr;gap:40px}
  .rs-flow{grid-template-columns:repeat(2,1fr)}
  .rs-stats-grid{grid-template-columns:repeat(2,1fr)}
  .rs-adv-list li{flex-direction:column;gap:4px}
}
@media (max-width:640px){
  .rs-flow{grid-template-columns:1fr}
  .rs-stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}