/* ==========================================================================
   北京安生动物医院 · 官网设计系统
   简约 / 克制 / 动物医院行业
   松石绿 #1F6F62 + 纸白 #F7F8F6 + 暖木 #C08A4E
   ========================================================================== */

:root{
  --brand:#1F6F62;
  --brand-2:#16564C;
  --brand-3:#0E3B36;
  --brand-soft:#E7F1EE;
  --brand-tint:#F2F7F5;

  --ink:#16211F;
  --ink-2:#3E4C49;
  --muted:#74817E;

  --bg:#F7F8F6;
  --bg-2:#EFF2EF;
  --paper:#FFFFFF;

  --warm:#B98248;
  --warm-soft:#F6EEE2;

  --line:#E1E7E3;
  --line-2:#EDF1EE;

  --r-xs:4px;
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;

  --sh:0 1px 2px rgba(16,33,31,.04), 0 12px 30px -24px rgba(16,33,31,.35);

  --f:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,sans-serif;
  --f-num:"Songti SC","Source Han Serif SC",Georgia,serif;

  --wrap:1160px;
  --pad:36px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
svg{width:1.05em;height:1.05em;flex:none;display:inline-block;vertical-align:-.16em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
::selection{background:var(--brand);color:#fff}
.skip{position:absolute;left:-9999px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:840px}
.sec{padding:88px 0}
.sec--sm{padding:60px 0}
.sec--paper{background:var(--paper);border-block:1px solid var(--line-2)}
.sec--tint{background:var(--bg-2);border-block:1px solid var(--line-2)}
.sec--dark{background:var(--brand-3);color:#fff}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.sec--dark .eyebrow{color:rgba(255,255,255,.62)}
.sec__head{max-width:720px;margin-bottom:40px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__title{font-size:clamp(27px,2.8vw,36px);line-height:1.3;letter-spacing:-.015em;font-weight:650;margin-top:14px}
.sec__title em{font-style:normal;color:var(--brand)}
.sec--dark .sec__title em{color:#8FD3C4}
.sec__desc{margin-top:14px;color:var(--ink-2);font-size:16px;line-height:1.85;max-width:680px}
.sec--dark .sec__desc{color:rgba(255,255,255,.74)}
.lead{font-size:17px;line-height:1.9;color:var(--ink-2)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.btn svg{width:16px;height:16px}
.btn--solid{background:var(--brand);color:#fff}
.btn--solid:hover{background:var(--brand-2)}
.btn--line{border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn--line:hover{border-color:var(--brand);color:var(--brand)}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{background:var(--brand-soft)}
.btn--ghost-w{border:1px solid rgba(255,255,255,.42);color:#fff}
.btn--ghost-w:hover{background:rgba(255,255,255,.1)}
.btn--sm{height:38px;padding:0 16px;font-size:13.5px}

/* ---------- topbar / header ---------- */
.topbar{background:var(--brand-3);color:rgba(255,255,255,.86);font-size:12.5px}
.topbar__in{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:20px}
.topbar__l,.topbar__r{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;letter-spacing:.02em}
.topbar svg{width:13px;height:13px}
.topbar__dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#8FD3C4;margin-right:7px;vertical-align:2px}

.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(8px)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
/* 院方正式标识是横版插画，34px 会糊；页头按 92px 宽等比展示 */
.brand__mark{width:92px;height:auto;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.25}
.brand__cn{font-size:18px;font-weight:700;letter-spacing:.03em}
.brand__en{font-size:9.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{position:relative;padding:9px 11px;font-size:14px;color:var(--ink-2);border-radius:var(--r-xs);white-space:nowrap}
.nav a:hover{color:var(--brand);background:var(--brand-tint)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:650}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--brand);border-radius:2px}
.hdr__cta{flex:none}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 8px}
.burger i{display:block;height:1.5px;background:var(--ink);margin:4px 0;border-radius:2px}
.drawer{display:none}

/* ---------- hero ---------- */
.hero{padding:76px 0 68px;background:var(--paper);border-bottom:1px solid var(--line-2)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:center}
.hero__label{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:4px 13px;font-weight:600}
.hero h1{font-size:clamp(32px,3.7vw,46px);line-height:1.28;letter-spacing:-.02em;font-weight:680;margin-top:22px}
.hero h1 small{display:block;font-size:17px;line-height:1.7;font-weight:500;color:var(--brand);letter-spacing:.02em;margin-top:14px}
.hero__desc{margin-top:22px;color:var(--ink-2);line-height:1.9;max-width:560px}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__fig{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.hero__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;color:#fff;font-size:12.5px;background:linear-gradient(transparent,rgba(10,30,27,.72))}
.hero__cap b{font-weight:650}

/* ---------- trust strip ---------- */
.trust{background:var(--brand-soft);border-bottom:1px solid #D7E8E2}
.trust__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:26px 0}
.trust__item{padding:2px 24px;border-left:1px solid #CFE2DC}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__v{font-size:21px;font-weight:700;color:var(--brand);line-height:1.3}
.trust__v small{font-size:13px;font-weight:600;margin-left:3px}
.trust__k{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.6}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.card__ic{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--brand);margin-bottom:18px}
.card__ic svg{width:20px;height:20px}
.card h3{font-size:17px;font-weight:650;margin-bottom:9px}
.card p{font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.card__meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted)}
.card--flat{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0}
.card--flat .card__ic{display:none}

/* ---------- list ---------- */
.ticks li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-2);line-height:1.9;margin-bottom:7px}
.ticks li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.7}
.ticks--w{color:rgba(255,255,255,.8)}
.ticks--w li{color:rgba(255,255,255,.8)}
.ticks--w li::before{background:#8FD3C4}

/* ---------- figure ---------- */
.fig{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
/* 图片按自身比例完整展示：不锁死容器比例、不用 cover，竖构图不会被裁掉下半截 */
.fig__img{background:#F1F3F1;display:block;position:relative}
.fig__img img{display:block;width:100%;height:auto}
.fig__img--contain img{object-fit:contain}
.fig__zoom{display:block;position:relative;cursor:zoom-in}
/* 设备图左下角角标：整机 / 机身铭牌 */
.fig__badge{position:absolute;left:12px;bottom:12px;z-index:2;font-size:11.5px;letter-spacing:.02em;background:rgba(14,59,54,.78);color:#fff;padding:4px 9px;border-radius:6px;pointer-events:none}
.fig__zoom::after{content:"查看原图 ↗";position:absolute;right:10px;bottom:10px;background:rgba(14,59,54,.86);color:#fff;font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:6px;opacity:0;pointer-events:none}
.fig__zoom:hover::after,.fig__zoom:focus-visible::after{opacity:1}
.fig figcaption{padding:12px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line-2);background:var(--paper);line-height:1.6}
.fig figcaption b{display:block;font-size:13.5px;color:var(--ink);font-weight:650;margin-bottom:2px}

/* ---------- table ---------- */
.tbl{font-size:14.5px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;overflow-wrap:anywhere}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--bg-2);font-weight:650;font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.tbl td{color:var(--ink-2)}
.tbl td strong{color:var(--ink);font-weight:650}
.tbl--label td:first-child{width:34%;color:var(--muted)}
.tbl--zebra tr:nth-child(even) td{background:#FBFCFB}

/* ---------- device panels ---------- */
.devtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.devtab{padding:9px 17px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--paper)}
.devtab:hover{border-color:var(--brand);color:var(--brand)}
.devtab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.devgroup{display:none}
.devgroup.is-on{display:block}
.devlist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.devlist button{padding:7px 13px;font-size:13px;border:1px solid var(--line);border-radius:var(--r-xs);color:var(--ink-2);background:var(--paper)}
.devlist button[aria-selected="true"]{border-color:var(--brand);color:var(--brand);font-weight:650;background:var(--brand-tint)}
/* 单台设备 = 一张横向圆角卡片（康维式）：整机与铭牌并排在左侧同一图区，文字在右 */
.devpanel{display:none;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip;background:var(--paper)}
.devpanel.is-on{display:grid}
.devpanel__media{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-2);min-height:100%}
.devpanel__media .fig{border:0;border-radius:0;margin:0}
/* 图片完整展示：不锁死比例、不用 cover 裁切；行高取两图与文字较高者，矮图以底色补齐 */
.devpanel__media .fig__img{height:100%}
.devpanel__media .fig__img img{width:100%;height:100%;object-fit:contain}
/* overflow:clip 只裁圆角、不建滚动容器；卡片高度由内容定，无需吸顶 */
.devpanel__info{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.devpanel__kicker{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.devpanel__info h3{font-size:clamp(20px,2vw,25px);font-weight:650;line-height:1.35;margin-top:9px}
.devpanel__info .model{margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.devpanel__info .model b{font-family:var(--f-num);font-size:16px;font-weight:650;color:var(--brand)}
.devpanel__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.devpanel__chip{font-size:11.5px;line-height:1;padding:6px 10px;border-radius:5px;background:var(--brand-soft);color:var(--brand);border:1px solid rgba(31,111,98,.16)}
.devpanel__chip--warm{background:var(--warm-soft);color:#8A5C2A;border-color:rgba(185,130,72,.22)}
.devpanel__use{margin-top:17px;font-size:15px;line-height:1.8;color:var(--ink-2)}
/* 编号信息紧跟用途说明，细线分隔；不用 auto，避免被长图撑到卡片下缘 */
.devpanel__bottom{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.devpanel__kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.devpanel__kv div{font-size:14px;color:var(--ink-2)}
.devpanel__kv span{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.devpanel__note{margin-top:16px;font-size:13.5px;color:var(--ink-2);background:var(--brand-tint);border-left:3px solid var(--brand);padding:12px 16px;border-radius:0 var(--r-xs) var(--r-xs) 0}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq__q{padding:20px 0 12px;font-size:16px;font-weight:650;color:var(--ink)}
.faq__a{padding-bottom:20px;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);line-height:1.9}
/* 急症提示：只用于「别等、立刻来电」这类关键句 */
.faq__a strong{color:var(--brand);font-weight:700}

/* ---------- CTA（全站统一，逐字一致） ---------- */
.cta{background:var(--brand);color:#fff}
.cta__in{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:52px;padding-bottom:52px}
.cta__k{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.7);margin-bottom:10px}
.cta__t{font-size:clamp(22px,2.4vw,29px);font-weight:650;line-height:1.35}
.cta__d{margin-top:12px;max-width:620px;color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.85}
.cta__acts{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.cta__foot{border-top:1px solid rgba(255,255,255,.18);padding:14px 0 18px;font-size:12.5px;color:rgba(255,255,255,.7)}

/* ---------- footer ---------- */
.ftr{background:var(--brand-3);color:rgba(255,255,255,.72);padding:52px 0 0;font-size:13.5px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:40px}
.ftr__brand .brand__cn{color:#fff}
.ftr__brand .brand__en{color:rgba(255,255,255,.5)}
.ftr__desc{line-height:1.9;margin-top:16px;max-width:380px}
.ftr h4{color:#fff;font-size:13px;font-weight:650;letter-spacing:.06em;margin-bottom:14px}
.ftr li{margin-bottom:9px}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr__bot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.55)}
.ftr__bot a{color:rgba(255,255,255,.72)}

/* ---------- misc ---------- */
.note{background:var(--warm-soft);border:1px solid #EBDCC4;border-radius:var(--r);padding:18px 22px;font-size:14px;color:#6B5231;line-height:1.85}
.note b{color:#5A4527}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);margin:0 6px 6px 0}
.divider{height:1px;background:var(--line);margin:36px 0}
.inline-link{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{gap:0}
  .nav a{padding:8px 7px;font-size:13px}
  .nav a[aria-current="page"]::after{left:7px;right:7px}
  .hdr__in{gap:16px}
  .hero__grid,.split{gap:40px}
}
@media (max-width:900px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:block;margin-left:auto}
  .drawer{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px var(--pad) 18px;box-shadow:var(--sh)}
  .drawer.is-on{display:grid}
  .drawer a{padding:11px 4px;border-bottom:1px solid var(--line-2);font-size:15px}
  .hdr{position:relative}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}
  .trust__item:nth-child(3){border-left:0;padding-left:0}
  .hero__grid,.split{grid-template-columns:1fr;gap:34px}
  /* 窄屏：图区在上、文字在下（单列），两图仍并排 */
  .devpanel{grid-template-columns:1fr}
  .hero{padding:52px 0}
  .cta__in{flex-direction:column;align-items:flex-start;gap:24px;padding-top:40px;padding-bottom:40px}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:32px}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--pad:20px}
  .sec{padding:56px 0}
  .sec--sm{padding:42px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .devpanel__kv{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .ftr__brand{grid-column:auto}
  .topbar__addr{display:none}
  .topbar__in{flex-wrap:wrap;gap:0 12px;padding-block:6px}
  .topbar__l,.topbar__r{gap:12px}
  .cta__acts{width:100%}
  .cta__acts .btn{flex:1}
  .devtabs{gap:6px}
  .devtab{padding:7px 12px;font-size:12.5px}
  .brand__mark{width:78px}
}