/* 沈阳奥翔假肢 · 装配指南站 样式 v4（全站视觉重塑：彩色渐变体系 + 手机适配） */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --blue:#1173c4; --blue-d:#0b4a8f; --blue-l:#e3f0fb;
  --teal:#0d9aa8; --teal-l:#dff5f4;
  --orange:#ff8a3d; --orange-d:#f06d1a; --orange-l:#ffe9d6;
  --green:#2ea86a; --green-l:#e2f5e9;
  --ink:#22303e; --gray:#5c6b7a;
  --bg:#f4f8fc; --line:#e2eaf2;
}
html { font-size:18px; scroll-behavior:smooth; }
body { font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif; color:var(--ink); background:#fff; line-height:1.85; font-size:18px; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); text-decoration:none; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--orange); outline-offset:2px; border-radius:4px; }
img { max-width:100%; display:block; }
.wrap { max-width:1120px; margin:0 auto; padding:0 18px; }

/* ===== 动效 ===== */
@keyframes fadeUp { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes pulse { 0%,100%{box-shadow:0 6px 18px rgba(255,138,61,.5);} 50%{box-shadow:0 6px 28px rgba(255,138,61,.85);} }

/* ===== 顶栏 ===== */
.topbar { background:linear-gradient(90deg,#0b4a8f 0%,#1173c4 55%,#0d9aa8 100%); color:#e4f0fa; font-size:15px; }
.topbar .wrap { display:flex; justify-content:space-between; padding:8px 18px; gap:12px; }
.topbar b { color:#fff; font-weight:600; }

/* ===== 导航：所有宽度都直接显示，不折叠、不隐藏 ===== */
header.nav { position:sticky; top:0; background:#fff; box-shadow:0 2px 14px rgba(11,74,143,.14); z-index:50; }
header.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:78px; gap:14px; }
.logo { display:block; flex-shrink:0; line-height:0; }
.logo img { display:block; width:200px; height:auto; }
nav.menu { display:flex; align-items:center; flex-wrap:nowrap; gap:20px; font-size:15.5px; flex-shrink:0; }
nav.menu a { color:var(--ink); font-weight:500; padding:6px 2px; border-bottom:2px solid transparent; white-space:nowrap; }
nav.menu a:hover, nav.menu a[aria-current="page"] { color:var(--blue); border-bottom-color:var(--blue); }
nav.menu a[aria-current="page"] { font-weight:700; }
.btn-tel { background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:#fff; padding:10px 22px; border-radius:24px; font-weight:700; font-size:17px; white-space:nowrap; box-shadow:0 4px 12px rgba(240,109,26,.4); flex-shrink:0; }
.btn-tel:hover { filter:brightness(1.08); box-shadow:0 6px 16px rgba(240,109,26,.55); }

/* 笔记本/窄窗口：收紧留白，6 项仍在同一行排开 */
@media (max-width:1180px){
  .logo img { width:174px; }
  nav.menu { gap:12px; font-size:15px; }
  .btn-tel { padding:9px 16px; font-size:16px; }
}
/* 小平板：门头一行，导航整行单独一排（依旧全部可见） */
@media (max-width:860px){
  header.nav .wrap { height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:0; }
  .logo { order:1; }
  .btn-tel { order:2; }
  nav.menu { order:3; flex:0 0 100%; width:100%; justify-content:space-between; gap:4px; margin-top:10px; border-top:1px solid var(--line); }
  nav.menu a { padding:10px 2px 12px; font-size:14.5px; }
}
/* 手机：3 列 × 2 行全部铺开，不用点任何按钮 */
@media (max-width:560px){
  header.nav .wrap { padding:10px 12px 0; gap:8px; }
  .logo img { width:150px; }
  .btn-tel { padding:8px 12px; font-size:14px; }
  nav.menu { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; text-align:center; }
  nav.menu a { padding:9px 2px; font-size:13.5px; border-bottom:1px solid var(--line); }
  nav.menu a:nth-last-child(-n+3) { border-bottom:none; }
  nav.menu a[aria-current="page"] { background:var(--blue-l); border-bottom-color:var(--blue); border-radius:6px; }
}

/* ===== hero ===== */
.hero { position:relative; color:#fff; }
.hero img.bg { width:100%; height:520px; object-fit:cover; filter:brightness(.5) saturate(1.1); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(9,54,102,.82) 0%,rgba(17,115,196,.42) 55%,rgba(13,154,168,.30) 100%); pointer-events:none; }
.hero .txt { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; z-index:2; }
.hero h1 { font-size:42px; line-height:1.32; text-shadow:0 2px 14px rgba(0,0,0,.45); letter-spacing:1px; font-weight:800; animation:fadeUp .32s ease both; }
.hero .sub { margin-top:16px; font-size:19px; opacity:.97; animation:fadeUp .32s .06s ease both; }
.hero .co { margin-top:10px; font-size:17px; color:#ffd9ae; font-weight:600; animation:fadeUp .32s .12s ease both; }
.hero .tags { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; animation:fadeUp .32s .18s ease both; }
.hero .tags i { font-style:normal; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); padding:6px 16px; border-radius:18px; font-size:15.5px; }
.hero .tags i:nth-child(2) { background:rgba(13,154,168,.35); }
.hero .tags i:nth-child(3) { background:rgba(255,138,61,.32); }
.hero .tags i:nth-child(4) { background:rgba(46,168,106,.32); }
@media (max-width:900px){ .hero img.bg{height:450px;} .hero h1{font-size:30px;} .hero .sub{font-size:16.5px;} .hero .co{font-size:15px;} .hero .tags i{font-size:13.5px;padding:5px 12px;} }
@media (max-width:520px){ .hero img.bg{height:410px;} .hero h1{font-size:25px;} }

/* ===== 信任条（彩色图标） ===== */
.trust { background:linear-gradient(90deg,#0b4a8f 0%,#1173c4 60%,#0d9aa8 100%); color:#fff; }
.trust .wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:22px 18px; text-align:center; font-size:15px; }
.trust .wrap > div::before { display:block; font-size:24px; margin-bottom:4px; }
.trust .wrap > div:nth-child(1)::before { content:"🛡️"; }
.trust .wrap > div:nth-child(2)::before { content:"🤝"; }
.trust .wrap > div:nth-child(3)::before { content:"🎖️"; }
.trust .wrap > div:nth-child(4)::before { content:"📍"; }
.trust b { display:block; font-size:17px; margin-bottom:2px; color:#ffd9ae; }
@media (max-width:760px){ .trust .wrap{grid-template-columns:repeat(2,1fr); gap:16px 6px;} }

/* ===== 区块与标题 ===== */
section.sec { padding:64px 0; }
section.sec.alt { background:linear-gradient(180deg,#f0f6fc 0%,#e9f2fa 100%); }
h2.sec-t { font-size:32px; text-align:center; margin-bottom:10px; letter-spacing:1px; font-weight:800; color:var(--blue-d); }
h2.sec-t::after { content:""; display:block; width:64px; height:5px; margin:13px auto 0; border-radius:3px; background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 35%,var(--teal) 100%); }
p.sec-s { text-align:center; color:var(--gray); margin-bottom:38px; font-size:16.5px; }
@media (max-width:520px){ h2.sec-t{font-size:26px;} section.sec{padding:46px 0;} }

/* ===== 问句卡片（四色循环顶条） ===== */
.qgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.qcard { background:#fff; border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:16px; padding:26px; transition:.22s; display:block; color:var(--ink); box-shadow:0 3px 10px rgba(11,74,143,.06); }
.qcard:nth-child(4n+2){ border-top-color:var(--teal); }
.qcard:nth-child(4n+3){ border-top-color:var(--orange); }
.qcard:nth-child(4n+4){ border-top-color:var(--green); }
.qcard:hover { transform:translateY(-4px); }
.qcard:nth-child(4n+1):hover{ box-shadow:0 14px 30px rgba(17,115,196,.2); }
.qcard:nth-child(4n+2):hover{ box-shadow:0 14px 30px rgba(13,154,168,.2); }
.qcard:nth-child(4n+3):hover{ box-shadow:0 14px 30px rgba(255,138,61,.22); }
.qcard:nth-child(4n+4):hover{ box-shadow:0 14px 30px rgba(46,168,106,.22); }
.qcard h3 { font-size:21px; margin-bottom:10px; color:var(--blue-d); line-height:1.5; }
.qcard p { font-size:15.5px; color:var(--gray); }
.qcard .more { display:inline-block; margin-top:14px; font-size:15.5px; color:var(--blue); font-weight:700; }
.qcard:hover .more { color:var(--orange-d); }
@media (max-width:760px){ .qgrid{grid-template-columns:1fr;} .qcard{padding:20px;} .qcard h3{font-size:19px;} }

/* ===== 能力卡（四色渐变图标） ===== */
.caps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cap { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:.2s; box-shadow:0 3px 10px rgba(11,74,143,.05); }
.cap:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(11,74,143,.13); }
.cap .ico { width:52px; height:52px; border-radius:14px; font-size:26px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cap:nth-child(4n+1) .ico { background:linear-gradient(135deg,#e3f0fb,#cde4f8); }
.cap:nth-child(4n+2) .ico { background:linear-gradient(135deg,#dff5f4,#c5edea); }
.cap:nth-child(4n+3) .ico { background:linear-gradient(135deg,#ffe9d6,#ffd7b0); }
.cap:nth-child(4n+4) .ico { background:linear-gradient(135deg,#e2f5e9,#cbebd8); }
.cap h3 { font-size:19.5px; margin-bottom:8px; color:var(--blue-d); }
.cap p { font-size:15.5px; color:var(--gray); }
@media (max-width:900px){ .caps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .caps{grid-template-columns:1fr;} }

/* ===== 业务范围（彩色边条 + 图标） ===== */
.biz { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.biz a { background:#fff; border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:12px; padding:20px 22px; color:var(--ink); display:block; transition:.2s; box-shadow:0 2px 8px rgba(11,74,143,.05); }
.biz a:nth-child(4n+2){ border-left-color:var(--teal); }
.biz a:nth-child(4n+3){ border-left-color:var(--orange); }
.biz a:nth-child(4n+4){ border-left-color:var(--green); }
.biz a:hover { background:#fbfdff; transform:translateX(4px); box-shadow:0 8px 20px rgba(11,74,143,.13); }
.biz a::before { display:block; font-size:24px; margin-bottom:8px; }
.biz a:nth-child(1)::before { content:"🦿"; }
.biz a:nth-child(2)::before { content:"🦾"; }
.biz a:nth-child(3)::before { content:"🤖"; }
.biz a:nth-child(4)::before { content:"🚴"; }
.biz a:nth-child(5)::before { content:"🦴"; }
.biz a:nth-child(6)::before { content:"🔧"; }
.biz b { display:block; font-size:18.5px; margin-bottom:6px; color:var(--blue-d); }
.biz span { font-size:15px; color:var(--gray); }
@media (max-width:900px){ .biz{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .biz{grid-template-columns:1fr;} }

/* ===== 图文行 ===== */
.row { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-bottom:44px; }
.row img { border-radius:16px; width:100%; height:330px; object-fit:cover; box-shadow:0 14px 32px rgba(11,74,143,.16); }
.row h3 { font-size:23px; margin-bottom:12px; color:var(--blue-d); }
.row p { color:var(--gray); font-size:16.5px; }
@media (max-width:760px){ .row{grid-template-columns:1fr; gap:18px;} .row img{height:230px;} }

/* ===== 流程（五色步骤） ===== */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; text-align:center; }
.steps .st { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 10px; transition:.2s; }
.steps .st:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(11,74,143,.14); }
.steps .n { width:44px; height:44px; line-height:44px; margin:0 auto 12px; color:#fff; border-radius:50%; font-weight:700; font-size:18px; }
.steps .st:nth-child(1) .n { background:linear-gradient(135deg,#1173c4,#0b4a8f); }
.steps .st:nth-child(2) .n { background:linear-gradient(135deg,#12b1c1,#0d9aa8); }
.steps .st:nth-child(3) .n { background:linear-gradient(135deg,#ff9d5c,#f06d1a); }
.steps .st:nth-child(4) .n { background:linear-gradient(135deg,#3cbd7e,#2ea86a); }
.steps .st:nth-child(5) .n { background:linear-gradient(135deg,#7a5cf0,#5b3fd0); }
.steps b { font-size:17px; display:block; margin-bottom:4px; color:var(--blue-d); }
.steps span { font-size:14px; color:var(--gray); }
@media (max-width:900px){ .steps{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .steps{grid-template-columns:repeat(2,1fr);} .steps .st:nth-child(5){grid-column:1/-1;} }

/* ===== FAQ ===== */
details.faq { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; padding:0 22px; transition:.2s; }
details.faq[open] { border-color:var(--blue); box-shadow:0 8px 22px rgba(17,115,196,.12); }
details.faq summary { cursor:pointer; list-style:none; padding:19px 0; font-weight:600; font-size:17.5px; position:relative; padding-right:32px; }
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after { content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:24px; font-weight:400; transition:.2s; }
details.faq[open] summary::after { content:"−"; color:var(--orange-d); }
details.faq .a { padding:0 0 19px; color:#3d4a58; font-size:16px; border-top:1px dashed var(--line); padding-top:14px; }

/* ===== 文章页 ===== */
.crumbs { font-size:15px; color:var(--gray); padding:22px 0 0; }
.crumbs a { color:var(--teal); }
article.doc { max-width:840px; margin:0 auto; padding:24px 0 50px; }
article.doc h1 { font-size:32px; line-height:1.45; margin-bottom:14px; font-weight:800; color:var(--blue-d); background:linear-gradient(135deg,#eef5fc 0%,#ffffff 70%); border-left:6px solid var(--blue); padding:22px 24px; border-radius:0 16px 16px 0; }
.meta { color:var(--gray); font-size:15px; margin-bottom:30px; padding:0 4px 18px 30px; border-bottom:1px solid var(--line); }
article.doc h2 { font-size:24px; margin:38px 0 14px; padding-left:12px; border-left:5px solid var(--blue); color:var(--blue-d); font-weight:700; }
article.doc h3 { font-size:19px; margin:24px 0 10px; }
article.doc p, article.doc li { font-size:17px; color:#2a3642; margin-bottom:14px; }
article.doc ul { padding-left:24px; }
article.doc li::marker { color:var(--teal); }
article.doc img { border-radius:16px; margin:22px 0; box-shadow:0 10px 26px rgba(11,74,143,.12); }
article.doc strong { color:var(--blue-d); }
.callout { background:linear-gradient(135deg,#eef5fc,#f2fbf9); border:1px solid #cfe2f4; border-left:5px solid var(--teal); border-radius:14px; padding:20px 22px; margin:24px 0; font-size:16.5px; }
.callout strong { color:var(--orange-d); }

/* ===== 文章内表格：电脑=彩色表格，手机=卡片 ===== */
article.doc table { width:100%; border-collapse:collapse; margin:20px 0 24px; font-size:16px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(11,74,143,.1); border:1px solid var(--line); }
article.doc th { background:linear-gradient(90deg,#0b4a8f,#1173c4 60%,#0d9aa8); color:#fff; font-weight:600; padding:13px 14px; text-align:left; }
article.doc td { padding:13px 14px; border-bottom:1px solid var(--line); color:#2a3642; }
article.doc tr:last-child td { border-bottom:none; }
article.doc tr:nth-child(even) td { background:#f7fafd; }
article.doc td:first-child { font-weight:600; }
article.doc p em { color:var(--gray); font-size:15px; }
/* 手机端：表格转卡片，一行一卡不再挤成两行 */
@media (max-width:760px){
  article.doc table { display:block; background:transparent; border:none; box-shadow:none; overflow:visible; border-radius:0; }
  article.doc tr { display:block; background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; padding:4px 16px; box-shadow:0 4px 12px rgba(11,74,143,.07); }
  article.doc tr:first-child { display:none; }
  article.doc tr:nth-child(even) td { background:transparent; }
  article.doc td { display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px dashed var(--line); padding:11px 0; white-space:normal; text-align:right; }
  article.doc td:last-child { border-bottom:none; }
  article.doc td::before { content:attr(data-label); color:var(--gray); font-size:13.5px; font-weight:600; flex-shrink:0; text-align:left; }
  article.doc td:first-child { display:block; font-size:17px; color:var(--blue-d); font-weight:700; padding-top:12px; border-bottom:1px solid var(--line); }
  article.doc td:first-child::before { content:none; }
  article.doc h1 { font-size:24px; padding:16px 18px; border-radius:0 12px 12px 0; }
  article.doc h2 { font-size:21px; }
  article.doc .meta { padding-left:24px; }
}
.toc { background:linear-gradient(135deg,#eef5fc,#f2fbf9); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-bottom:28px; font-size:16px; }
.toc b { display:block; margin-bottom:8px; color:var(--blue-d); }
.toc b::before { content:"📑 "; }
.toc a { margin-right:18px; }
.next { margin-top:42px; padding-top:26px; border-top:1px solid var(--line); }
.next a { display:block; padding:16px 18px; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; color:var(--ink); font-size:16.5px; transition:.2s; }
.next a::before { content:"➜ "; color:var(--orange-d); font-weight:700; }
.next a:hover { border-color:var(--blue); background:#f7fafd; box-shadow:0 8px 20px rgba(17,115,196,.12); }
.next a span { color:var(--gray); font-size:14.5px; display:block; margin-top:2px; }
/* 首页更多指南链接条 */
.morelinks { margin-top:28px; padding:18px 22px; background:linear-gradient(135deg,#eef5fc,#f2fbf9); border:1px solid var(--line); border-radius:14px; font-size:16px; line-height:2.2; }
.morelinks b { color:var(--blue-d); margin-right:6px; }
.morelinks b::before { content:"📌 "; }
.morelinks a { margin-right:16px; color:var(--ink); border-bottom:1px dashed #b9c8d6; }
.morelinks a:hover { color:var(--blue); border-color:var(--blue); }

/* ===== 页脚 ===== */
footer { background:linear-gradient(160deg,#0b4a8f 0%,#0d3a6e 55%,#0a5e68 100%); color:#c3d6e8; font-size:15.5px; padding:46px 0 24px; margin-top:50px; }
footer .wrap { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:26px; }
.footer-logo { display:block; width:210px; height:auto; margin-bottom:16px; }
footer h4 { color:#fff; font-size:18px; margin-bottom:12px; }
footer a { color:#c3d6e8; }
footer a:hover { color:#ffd9ae; }
footer .copy { text-align:center; margin-top:30px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); font-size:13.5px; }
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr; gap:18px;} }

/* ===== 移动悬浮电话（呼吸动效） ===== */
.float-tel { position:fixed; right:16px; bottom:22px; display:none; background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:#fff; padding:14px 22px; border-radius:28px; font-weight:700; font-size:17px; animation:pulse 2.4s infinite; z-index:60; }
@media (max-width:760px){ .float-tel{display:block;} }

/* ===== 手机小屏微调 ===== */
@media (max-width:520px){
  html { font-size:16px; }
  .logo img { width:142px; }
  .btn-tel { font-size:14px; padding:9px 13px; }
  header.nav .wrap { height:auto; }
  .topbar { font-size:13px; }
  .topbar .wrap span:first-child { display:none; }
}