/* ==========================================================================
   Yukenail — main stylesheet
   Design tokens mirror the reference layout: white base, #EC6607 accent,
   Montserrat headings, wide whitespace, thin borders.
   ========================================================================== */

:root{
  --brand:#EC6607;
  --brand-dark:#C95400;
  --ink:#111111;
  --ink-soft:#1B1B1B;
  --body:#5A5A5A;
  --muted:#8A8A8A;
  --line:#E6E6E6;
  --line-strong:#D6D6D6;
  --cream:#FAF6F0;
  --paper:#F5F5F3;
  --white:#FFFFFF;
  --green:#6E9C5A;
  --radius:2px;
  --radius-lg:4px;
  --container:1240px;
  --gap:24px;
  --sec:96px;
  --shadow:0 10px 30px rgba(17,17,17,.06);
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:15px;line-height:1.65;
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:700;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:var(--brand);color:#fff;z-index:999}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;margin:0;padding:10px 16px;overflow:visible;clip:auto}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* ---------- typography helpers ---------- */
.eyebrow{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.h-sec{font-size:38px;line-height:1.18;letter-spacing:-.02em}
.h-page{font-size:44px;line-height:1.12;letter-spacing:-.025em}
.lead{font-size:16px;color:var(--body);line-height:1.75}
.section{padding:var(--sec) 0}
.section--paper{background:var(--paper)}
.section--cream{background:var(--cream)}
.section__head{max-width:720px;margin-bottom:48px}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 32px;border:1px solid transparent;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--light:hover{border-color:var(--ink)}
.btn--block{width:100%}
.btn--sm{padding:10px 20px;font-size:13px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:14px}
.link-arrow:hover{color:var(--brand)}
.link-arrow::after{content:"→";transition:transform .18s ease}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- header ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:16px}
.topbar__note{margin:0;letter-spacing:.02em}
.topbar__right{display:flex;align-items:center;gap:18px}

.socials{display:flex;align-items:center;gap:10px}
.socials a{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#F2F2F0;color:#666;transition:background .18s ease,color .18s ease;
}
.socials a:hover{background:var(--brand);color:#fff}
/* 图标统一由 CSS 控制尺寸，模板里的 width/height 属性只作兜底 */
.socials a svg{display:block;width:14px;height:14px;flex:none}
.socials i{display:block;width:13px;height:13px;background:currentColor;border-radius:3px;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}

.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:#444;font-size:12px;font-weight:600;padding:6px 0;cursor:pointer;
  transition:color .2s ease;
}
.lang__btn:hover{color:var(--brand)}
.lang__caret{opacity:.55;transition:transform .2s ease}
.lang.is-open .lang__caret{transform:rotate(180deg)}
.lang__list a[aria-current]{background:var(--paper)}
.lang__list{
  position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);padding:6px;display:none;z-index:60;
}
.lang.is-open .lang__list{display:block}
.lang__list a{display:block;padding:8px 12px;font-size:13px;color:#444;border-radius:2px}
.lang__list a:hover{background:var(--paper)}
.lang__list a.is-active{color:var(--brand);font-weight:600}

.hdr{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}
.hdr.is-stuck{border-color:var(--line);box-shadow:0 4px 20px rgba(17,17,17,.05)}
.hdr__inner{display:flex;align-items:center;gap:32px;min-height:84px}
.hdr__logo img{width:168px;height:auto}
.nav{display:flex;align-items:center;gap:34px;margin:0 auto}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;
  color:var(--ink);padding:8px 0;position:relative;
}
.nav__link:hover,.nav__link.is-active{color:var(--brand)}
.nav__caret{transition:transform .2s ease;opacity:.6}
.nav__item{position:relative}
.nav__item:hover .nav__caret{transform:rotate(180deg)}
.mega{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:28px;min-width:620px;opacity:0;visibility:hidden;transition:.18s ease;z-index:60;
}
.nav__item:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px}
.mega__head{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.mega__head:hover{color:var(--brand)}
.mega__sub li+li{margin-top:6px}
.mega__sub a{font-size:13px;color:#666}
.mega__sub a:hover{color:var(--brand)}

.hdr__actions{display:flex;align-items:center;gap:14px}
.iconbtn{background:none;border:0;padding:8px;color:var(--ink);display:grid;place-items:center}
.iconbtn:hover{color:var(--brand)}
.burger{display:none;background:none;border:0;width:40px;height:40px;padding:8px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--ink);width:100%}

/* search pop */
.searchpop{position:fixed;inset:0;background:rgba(17,17,17,.55);z-index:90;display:grid;place-items:start center;padding-top:18vh}
.searchpop[hidden]{display:none}
.searchpop__form{display:flex;gap:8px;background:#fff;padding:16px;width:min(720px,92vw);position:relative}
.searchpop__form input{flex:1;border:1px solid var(--line);padding:14px 16px;border-radius:2px}
.searchpop__close{position:absolute;right:-42px;top:0;background:none;border:0;color:#fff;font-size:34px;line-height:1}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#F7F7F5 0%,#EFEFEC 100%);overflow:hidden;position:relative}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:560px;padding:64px 0 72px}
.hero__title{font-size:52px;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.hero__text{font-size:16px;max-width:480px;margin-bottom:32px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__media{position:relative}
.hero__collage{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero__collage .ph{border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(17,17,17,.05)}
.hero__dots{display:flex;gap:8px;margin-top:28px}
.hero__dots span{width:26px;height:3px;background:#D5D5D0;display:block}
.hero__dots span.is-active{background:var(--brand)}

/* placeholder media */
.ph{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:#EDEDEA url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23DEDEDA' stroke-width='1'%3E%3Cpath d='M0 120L120 0M-20 40L40-20M80 140L140 80'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.ph--wide{aspect-ratio:16/9}
.ph--square{aspect-ratio:1/1}
.ph--tall{aspect-ratio:4/5}
.ph:not(:has(img))::after{
  content:"";position:absolute;inset:0;margin:auto;width:34px;height:34px;opacity:.28;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l5.5-5 4 4 2.5-2.5L20 17'/%3E%3C/svg%3E");
}
.ph__label{
  position:absolute;inset:auto 0 0 0;padding:10px 14px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#9A9A96;background:linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,0));
}

/* ---------- tabs + product grid ---------- */
.tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.tab{
  padding:12px 26px;font-size:15px;font-weight:500;color:var(--ink);background:none;
  border:1px solid transparent;border-radius:var(--radius);
}
.tab:hover{border-color:var(--line-strong)}
.tab.is-active{background:var(--brand);color:#fff}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}

.pcard{
  display:flex;gap:18px;align-items:center;border:1px solid var(--line);
  background:#fff;padding:18px;transition:border-color .2s ease,box-shadow .2s ease;
}
.pcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.pcard__media{flex:0 0 120px;width:120px}
.pcard__media .ph{aspect-ratio:1/1;border-radius:var(--radius)}
.pcard__body{min-width:0}
.pcard__title{font-size:16px;line-height:1.35;margin-bottom:8px}
.pcard__title a:hover{color:var(--brand)}
.pcard__text{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.pgrid .pcard{flex-direction:column;align-items:stretch;border:0;padding:0;gap:14px}
.pgrid .pcard__media{flex:none;width:100%}
.pgrid .pcard__media .ph{aspect-ratio:4/3}
.pgrid .pcard__title{font-size:15px;text-align:center;margin:0}
.pgrid .pcard__text{text-align:center}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split--reverse .split__text{order:2}
.split__title{font-size:36px;line-height:1.2;margin-bottom:18px;letter-spacing:-.02em}
.split__text p{font-size:15px;margin-bottom:18px}
.split__media{position:relative}
.caption{
  background:var(--brand);color:#fff;font-size:12px;letter-spacing:.04em;
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stat__num{font-size:38px;font-weight:700;color:var(--brand);line-height:1;letter-spacing:-.02em}
.stat__label{font-size:13px;color:var(--body);margin-top:10px;max-width:180px}

/* team / gallery */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.team__item{text-align:center}
.team__item .ph{border-radius:var(--radius-lg);margin-bottom:18px}
.team__title{font-size:18px;margin-bottom:8px}
.team__text{font-size:13px;color:var(--muted)}

.gallery2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px}
.gallery2 figure{margin:0;position:relative}
.gallery2 .ph{border-radius:var(--radius-lg)}
.gallery2 figcaption{font-size:13px;color:var(--muted);padding:12px 0 0}

/* video */
.video{position:relative;aspect-ratio:16/9;background:#0E0E0E;display:grid;place-items:center}
.video iframe{width:100%;height:100%;border:0}
.video__play{display:grid;place-items:center;gap:10px;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.video__play span{width:64px;height:44px;border-radius:8px;background:#FF0000;display:grid;place-items:center}
.video__play span::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}

/* strengths */
.strengths{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.strength{background:#fff;padding:36px 26px;text-align:center;border:1px solid rgba(0,0,0,.04)}
.strength__icon{width:44px;height:44px;margin:0 auto 18px;color:var(--green)}
.strength__title{font-size:16px;line-height:1.35;margin-bottom:10px}
.strength__text{font-size:13px;color:var(--muted)}

/* certifications */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.cert{border:1px solid var(--line);background:#fff;padding:26px;text-align:center}
.cert__badge{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.cert__text{font-size:12px;color:var(--muted);margin-top:8px}

/* map + contact */
.mapbox{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mapbox__map{border:1px solid var(--line);min-height:340px;background:var(--paper);position:relative;overflow:hidden}
.mapbox__map iframe{width:100%;height:100%;min-height:340px;border:0}
.mapbox__title{font-size:32px;line-height:1.2;margin-bottom:24px}
.infolist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.infolist li:last-child{border-bottom:0}
.infolist svg{flex:0 0 22px;color:var(--brand);margin-top:2px}
.infolist strong{display:block;font-size:13px;color:var(--ink);font-weight:600}
.infolist span{font-size:14px;color:var(--body)}

/* CTA band */
.cta{background:var(--ink-soft);color:#fff;padding:64px 0}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:30px;margin-bottom:8px}
.cta p{color:#B9B9B9;font-size:15px}

/* ---------- page head / breadcrumbs ---------- */
.pagehead{padding:56px 0 40px;background:#fff;border-bottom:1px solid var(--line)}
.pagehead--plain{padding:48px 0 8px;border-bottom:0}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:18px}
.breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:#CFCFCF}
.pagehead h1{font-size:44px;line-height:1.12;letter-spacing:-.025em}
.pagehead .lead{max-width:760px;margin-top:16px}

/* ---------- listing with sidebar ---------- */
.withside{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start;padding-top:48px;padding-bottom:96px}
.side__title{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.side__list a{display:block;padding:10px 0;font-size:14px;color:#555;border-bottom:1px solid #F2F2F2}
.side__list a:hover,.side__list a.is-active{color:var(--brand);font-weight:600}
.side__sub{padding-left:14px}

/* product detail */
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:48px 0 88px;align-items:start}
.pdetail__gallery .ph{border:1px solid var(--line)}
.pdetail__thumbs{display:flex;gap:10px;margin-top:12px}
.pdetail__thumbs .ph{width:84px;aspect-ratio:1/1;cursor:pointer;border:1px solid var(--line)}
.pdetail h1{font-size:34px;line-height:1.2;margin-bottom:12px}
.pdetail__model{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.pdetail__excerpt{font-size:15px;margin-bottom:24px}
.specs{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:14px}
.specs th,.specs td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{color:var(--ink);font-weight:600;width:42%}
.pdetail__actions{display:flex;gap:12px;flex-wrap:wrap}
.prose{font-size:15px;line-height:1.8;color:var(--body)}
.prose h2{font-size:24px;margin:32px 0 12px}
.prose h3{font-size:19px;margin:26px 0 10px}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 16px 18px;list-style:disc}
.prose li{margin-bottom:8px}
.prose img{margin:18px 0}

/* 视觉隐藏（蜜罐字段等，不能用负定位，否则 RTL 下撑宽文档） */
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 单页正文（后台「页面管理」内容，富文本直出） */
.pagebody{max-width:820px}
.pagebody.prose{font-size:16px;line-height:1.85}
.pagebody.prose h2{font-size:26px;margin:40px 0 14px}
.pagebody.prose h2:first-child{margin-top:0}
.pagebody.prose h3{font-size:19px;margin:28px 0 10px}
.pagebody.prose ul{list-style:disc;margin:0 0 18px;padding-left:20px}
.pagebody.prose ol{list-style:decimal;margin:0 0 18px;padding-left:20px}
.pagebody.prose a{color:var(--brand);text-decoration:underline}
.pagebody.prose img{border-radius:var(--radius-lg)}
.pagebody.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--brand);color:var(--ink)}
.pagefig{margin:0}
.pagefig img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius-lg)}

/* blog */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.postcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.postcard .ph{border-bottom:1px solid var(--line)}
.postcard__body{padding:22px}
.postcard__meta{font-size:12px;color:var(--muted);letter-spacing:.04em;margin-bottom:10px}
.postcard__title{font-size:17px;line-height:1.4;margin-bottom:10px}
.postcard__title a:hover{color:var(--brand)}
.postcard__text{font-size:13px;color:var(--muted)}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;text-align:left;padding:22px 40px 22px 0;
  font-size:16px;font-weight:600;color:var(--ink);position:relative;
}
.faq__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:22px;font-weight:400}
.faq__item.is-open .faq__q::after{content:"–"}
.faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq__a p{padding:0 0 22px;font-size:14px;color:var(--body)}
.faq__item.is-open .faq__a{max-height:420px}

/* forms */
.form{display:grid;gap:16px}
.field{display:grid;gap:8px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:2px;padding:13px 14px;
  background:#fff;color:var(--ink);transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none}
.field textarea{min-height:130px;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:12px;color:var(--muted)}
.form__msg{font-size:14px;padding:12px 14px;border-radius:2px;display:none}
.form__msg.is-ok{display:block;background:#EDF7ED;color:#2E6B33}
.form__msg.is-err{display:block;background:#FDECEC;color:#A32D2D}

/* contact layout */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:56px 0 96px;align-items:start}
.contact-block h2{font-size:26px;margin-bottom:14px}
.contact-block h3{font-size:16px;margin:26px 0 10px}
.contact-block ul{list-style:disc;margin:0 0 18px 18px}
.contact-block li{margin-bottom:8px;font-size:14px}

/* ---------- footer ---------- */
.footer{background:var(--ink-soft);color:#B9B9B9;padding:72px 0 0;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.1fr;gap:48px;padding-bottom:56px}
.footer__logo{width:168px;height:auto;margin-bottom:18px}
.footer__desc{font-size:13px;line-height:1.75;margin-bottom:18px;max-width:320px}
.footer__title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600}
.footer__title--mt{margin-top:28px}
.footer__links li{margin-bottom:10px}
.footer__links a:hover,.footer__contact a:hover{color:#fff}
.footer__contact li{margin-bottom:14px;font-size:13px;line-height:1.6}
.footer__label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7E7E7E;margin-bottom:3px}
.footer__note{font-size:12px;color:#8E8E8E;margin-bottom:12px}
.socials--footer a{background:#2A2A2A;color:#C9C9C9}
.socials--footer a:hover{background:var(--brand);color:#fff}
.subscribe{display:flex;border:1px solid #3A3A3A}
.subscribe input{flex:1;background:transparent;border:0;padding:12px 14px;color:#fff;font-size:13px}
.subscribe input::placeholder{color:#7E7E7E}
.subscribe button{background:var(--brand);border:0;color:#fff;padding:0 16px;display:grid;place-items:center}
.subscribe button:hover{background:var(--brand-dark)}
.subscribe__msg{font-size:12px;color:#8FCB8F;margin-top:8px;min-height:16px}
.footer__bar{border-top:1px solid #2E2E2E;padding:18px 0;font-size:12px;color:#8E8E8E}
.footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__legal{display:flex;gap:18px}
.footer__legal a:hover{color:#fff}

/* floating buttons */
.fab,.wa{position:fixed;bottom:24px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:40;color:#fff}
.fab{right:24px;background:var(--brand);box-shadow:0 8px 20px rgba(236,102,7,.35)}
.wa{right:24px;bottom:86px;background:#25D366;box-shadow:0 8px 20px rgba(37,211,102,.35)}
.fab:hover,.wa:hover{transform:translateY(-2px)}

/* 返回顶部：叠在 WhatsApp 之上，滚动到一定距离才淡入。
   用 visibility + opacity 而不是 display，保证过渡能跑；pointer-events 同步关掉，
   避免隐藏状态下还能被点到（也避免 Tab 键落到它上面）。 */
.totop{
  position:fixed;right:24px;bottom:148px;width:52px;height:52px;
  border-radius:50%;display:grid;place-items:center;z-index:40;
  background:#fff;color:#5B6169;border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(17,24,39,.10);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.totop.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.totop:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.totop:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 用户要求减少动效时，全局撤掉平滑滚动与位移动画（不影响按钮功能） */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .totop{transform:none;transition:opacity .01ms,visibility .01ms,background .01s,color .01s}
  .totop.is-visible{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--sec:72px}
  .hero__inner{grid-template-columns:1fr;min-height:0;padding:48px 0 56px}
  .hero__title{font-size:40px}
  .grid-3,.strengths,.certs{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .split,.mapbox,.contact-layout,.pdetail{grid-template-columns:1fr;gap:40px}
  .split--reverse .split__text{order:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .withside{grid-template-columns:1fr;gap:32px}
  .team,.bloggrid{grid-template-columns:repeat(2,1fr)}
  .h-sec{font-size:32px}
  .pagehead h1{font-size:36px}
}
@media (max-width:820px){
  /* 主导航收起后，桌面端靠 .nav 的 auto 外边距撑开的右侧空间会消失，
     这里让功能按钮组自己吃掉剩余空间，始终贴右对齐 */
  .nav,.topbar__note{display:none}
  .burger{display:flex}
  .hdr__inner{min-height:68px;gap:12px}
  .hdr__actions{margin-inline-start:auto}
  .topbar__inner{justify-content:flex-end}
  .hdr__cta{display:none}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:100%;left:0;right:0;background:#fff;
    padding:8px 24px 24px;border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(17,17,17,.08);
    max-height:calc(100vh - 68px);overflow:auto;
  }
  .nav.is-open .nav__link{width:100%;padding:14px 0;border-bottom:1px solid #F2F2F2;justify-content:space-between}
  .nav.is-open .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:0 0 10px;min-width:0}
  .mega__list{grid-template-columns:1fr;gap:16px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .team,.bloggrid{grid-template-columns:1fr}
  .grid-3,.strengths,.certs{grid-template-columns:1fr}
}
@media (max-width:560px){
  .container{padding:0 18px}
  /* 顶部条在窄屏只保留语言切换，靠右对齐 */
  .topbar__inner{justify-content:flex-end}
  .hero__title{font-size:32px}
  .h-sec{font-size:26px}
  .pagehead h1{font-size:28px}
  .pgrid{grid-template-columns:1fr}
  .pgrid .pcard__media .ph{aspect-ratio:4/3}
  .pcard{flex-direction:column;align-items:stretch}
  .pcard__media{width:100%;flex:none}
  .stats{grid-template-columns:1fr}
  .cta h2{font-size:24px}
}

/* ---------- mobile refinements（手机端补强，放最后以覆盖上面的断点） ---------- */
@media (max-width:820px){
  /* 相关产品：4 列挤不下，改 2 列 */
  .grid-4{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  /* hero 图墙：2×2 四宫格，比一排小图更好看 */
  .hero__collage{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero__collage .ph{aspect-ratio:4/3}
  .hero__collage .ph:nth-child(n+5){display:none}
  /* 分类 tab：横向滚动，避免换行后参差不齐 */
  .tabs{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:10px;
    margin:0 -18px 28px;padding:0 18px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;white-space:nowrap}
  /* 博客卡图片限高，别一张图占满一屏 */
  .postcard .ph{aspect-ratio:16/9}
  .postcard__body{padding:18px}
  /* 底部给悬浮按钮留出空间 */
  .footer{padding-bottom:96px}
  /* 详情页图集限高 */
  .pdetail__gallery .ph{aspect-ratio:4/3}
}

@media (max-width:560px){
  :root{--sec:54px}
  .hero__title{font-size:30px;line-height:1.22}
  .hero__text{font-size:15px;margin-bottom:24px}
  .hero__cta{display:flex;flex-wrap:nowrap;gap:8px}
  .hero__cta .btn{flex:1 1 0;min-width:0;padding:13px 8px;font-size:12.5px;justify-content:center}
  .hero__dots{display:none}

  /* 产品卡：两列网格，图 1:1，摘要两行 */
  .grid-3,.pgrid{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .grid-3 .pcard,.pgrid .pcard{
    flex-direction:column;align-items:stretch;gap:10px;
    border:0;padding:0;background:none;box-shadow:none;
  }
  .grid-3 .pcard__media,.pgrid .pcard__media{flex:none;width:100%}
  .grid-3 .pcard__media .ph,.pgrid .pcard__media .ph{aspect-ratio:1/1;border-radius:var(--radius)}
  .grid-3 .pcard__title,.pgrid .pcard__title{font-size:14px;line-height:1.4;text-align:left;margin:0}
  .grid-3 .pcard__text,.pgrid .pcard__text{font-size:12px;text-align:left}

  /* 面包屑过长时可横向滑动，不换行 */
  .breadcrumbs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .breadcrumbs::-webkit-scrollbar{display:none}

  /* 规格表更紧凑 */
  .specs th,.specs td{padding:10px 0;font-size:13px}

  /* 详情页按钮等宽 */
  .pdetail__actions{display:flex;gap:10px}
  .pdetail__actions .btn{flex:1 1 0;justify-content:center}

  /* 数据条 2 列，别一字排到底 */
  .stats,.stats--4{grid-template-columns:1fr 1fr;gap:24px 16px}

  /* 悬浮按钮缩小并靠边，避免压住正文 */
  .fab,.wa{width:44px;height:44px;right:14px}
  .wa{bottom:72px}
  .fab svg,.wa svg{width:20px;height:20px}
  .totop{width:44px;height:44px;right:14px;bottom:126px}
  .totop svg{width:20px;height:20px}
  .footer{padding-bottom:88px}

  /* 页脚栏目标题与列表更紧凑 */
  .footer__grid{gap:26px}
}

@media (max-width:400px){
  .grid-3,.pgrid{grid-template-columns:1fr}
  .grid-3 .pcard__media .ph,.pgrid .pcard__media .ph{aspect-ratio:4/3}
  .stats,.stats--4{grid-template-columns:1fr}
}

/* ---------- mobile polish round 2 ---------- */
@media (max-width:560px){
  /* 团队照片限高，避免一张图占大半屏 */
  .team__item .ph{aspect-ratio:16/10;margin-bottom:14px}
  .team__title{font-size:17px}
  /* 认证 2 列更紧凑 */
  .certs{grid-template-columns:1fr 1fr;gap:14px}
  .cert{padding:22px 12px}
  /* 表单控件 16px：iOS 聚焦时不会自动放大页面 */
  .field input,.field select,.field textarea{font-size:16px}
  /* 锚点定位避开吸顶导航 */
  #inquiry,#main{scroll-margin-top:84px}
  /* 地图别太高 */
  .mapbox iframe,.mapbox .ph{min-height:240px}
}

/* ---------- mobile: 列表页侧栏转为横向分类条 ---------- */
@media (max-width:820px){
  .withside{padding-top:24px;padding-bottom:56px;gap:18px}
  .side__title{display:none}
  .side__list{
    display:flex;gap:8px;overflow-x:auto;margin:0;padding:0 0 6px;
    list-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .side__list::-webkit-scrollbar{display:none}
  .side__list > li{flex:0 0 auto;margin:0}
  .side__list a{
    display:block;padding:9px 14px;font-size:13px;color:var(--ink);
    border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap;
  }
  .side__list a:hover,.side__list a.is-active{
    color:#fff;background:var(--brand);border-color:var(--brand);font-weight:600;
  }
  /* 子分类与侧栏联系块在移动端先收起来，避免把产品推到两屏之后 */
  .side__sub{display:none}
  .side p,.side > .btn{display:none}
}

/* ---------- 防止网格子项被长单词撑宽（移动端横向溢出） ---------- */
.withside > *,.pgrid > *,.grid-3 > *,.grid-4 > *{min-width:0}
@media (max-width:560px){
  .grid-3,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
  .grid-3,.pgrid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- image credits ---------- */
.creditlist{list-style:none;margin:0;padding:0}
.creditlist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.creditlist li a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.creditlist li a:hover{color:var(--brand)}
.creditlist__meta{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* ==========================================================================
   手机端版式对齐 snrqi.com（全站）
   参考站实测（390px 视口）：内容宽 368px（左右各 11px）、区块间距 30~55px、
   区块标题 30px、产品为「单列全宽行卡」（左图右文 + 1px 边框 + 12px 内边距）、
   优势区多列小图标（不是纵向长条）、数据区两列。
   以下规则放在文件最末，覆盖前面所有断点，桌面端不受影响。
   ========================================================================== */

/* 博客 / FAQ / 致谢页的容器：原来靠内联 padding 写死上下距（同时把左右留白清零），
   改为类控制。只设上下，左右沿用 .container 的 24px / 手机端 11px。 */
.pagewrap{padding-top:48px;padding-bottom:96px}

/* --- 中屏：1080 以下认证别掉成 2 列（每格 400+ 宽只剩两个字母，太空） --- */
@media (max-width:1080px){
  .certs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}

/* --- 平板段：820px 以下不再一路收成单列 --- */
@media (max-width:820px){
  /* 产品：平板保持两列（原来塌成单列，一张卡横跨 700px） */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 16px}
  /* 优势：两列 */
  .strengths{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .certs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  /* 团队：两列（第三项自动换行） */
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  /* 数据：始终两列 */
  .stats,.stats--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}

  /* 平板两列时产品卡改竖排（图片在上），横排会挤成一条 */
  .grid-3 .pcard{flex-direction:column!important;align-items:stretch;gap:12px}
  .grid-3 .pcard__media,.grid-3 a.pcard__media{flex:none;width:100%}
  .grid-3 .pcard__media.ph,.grid-3 a.pcard__media.ph{aspect-ratio:4/3!important}
  .grid-3 .pcard__title{text-align:left}
  .grid-3 .pcard__text{text-align:left}
}

/* --- 手机段 --- */
@media (max-width:560px){
  /* 1. 内容宽度：18px → 11px（与参考站一致，390 下内容 368px） */
  .container{padding:0 11px}

  /* 2. 纵向节奏收紧：54px → 34px */
  :root{--sec:34px}
  .section{padding:34px 0}
  .section__head{margin-bottom:20px}
  .section__head .lead{margin-top:8px;font-size:14px;line-height:1.7}

  /* 3. 标题字号对齐参考站 */
  .h-sec{font-size:30px;line-height:1.2;letter-spacing:-.02em}
  .hero__title{font-size:28px;line-height:1.18;margin-bottom:14px}
  .split__title{font-size:25px;line-height:1.24}
  .mapbox__title{font-size:24px}
  .pagehead{padding:28px 0 22px}
  .pagehead h1{font-size:28px}
  .pagehead .lead{margin-top:10px;font-size:14px}
  .eyebrow{font-size:11px;margin-bottom:8px;letter-spacing:.12em}
  .lead{font-size:14px;line-height:1.7}

  /* 4. 产品卡：单列全宽行卡（左图右文 + 1px 边框 + 12px 内边距） */
  .grid-3,.pgrid{grid-template-columns:minmax(0,1fr)!important;gap:13px}
  .grid-3 .pcard,.pgrid .pcard{
    display:flex!important;flex-direction:row!important;align-items:center;
    gap:12px;border:1px solid var(--line);padding:12px;background:#fff;
    box-shadow:none;min-width:0;
  }
  .grid-3 .pcard__media,.pgrid .pcard__media,
  .grid-3 a.pcard__media,.pgrid a.pcard__media{flex:0 0 112px;width:112px}
  /* 注意：.pcard__media 元素本身就带 ph 类（<a class="pcard__media ph">），
     必须用「同元素双类」选择器，写后代选择器匹配不到任何节点。 */
  .grid-3 .pcard__media.ph,.pgrid .pcard__media.ph,
  .grid-3 a.pcard__media.ph,.pgrid a.pcard__media.ph{
    aspect-ratio:1/1!important;border-radius:0;height:auto;
  }
  .grid-3 .pcard__body,.pgrid .pcard__body{flex:1 1 auto;min-width:0}
  .grid-3 .pcard__title,.pgrid .pcard__title{
    font-size:15px;line-height:1.35;text-align:left;margin:0 0 6px;
  }
  .grid-3 .pcard__text,.pgrid .pcard__text{
    font-size:13px;line-height:1.6;text-align:left;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* 5. 分类 tab：贴边横向滚动（与参考站的一排分类条一致） */
  .tabs{margin:0 -11px 20px;padding:0 11px 4px;gap:8px}
  .tab{padding:9px 16px;font-size:13px}

  /* 6. 数据统计：两列（原来 400px 以下塌成单列） */
  .stats,.stats--4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 14px}
  .stat__num{font-size:30px}
  .stat__label{font-size:12px;margin-top:6px;max-width:none}

  /* 7. 优势：2×2 网格（原来 1 列排出 923px 长条） */
  .strengths{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin-top:22px}
  .strength{padding:18px 12px}
  .strength__icon{width:34px;height:34px;margin:0 auto 12px}
  .strength__title{font-size:14px;line-height:1.3;margin-bottom:7px}
  .strength__text{
    font-size:12px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* 8. 认证：4 列小格（参考站证书墙为 4 列） */
  .certs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px;margin-top:22px}
  .cert{padding:14px 6px}
  .cert__badge{font-size:14px}
  .cert__text{font-size:10px;line-height:1.35;margin-top:5px}

  /* 9. 团队：单列，图片压扁避免一张图占大半屏 */
  .team{grid-template-columns:minmax(0,1fr)!important;gap:22px;margin-top:22px}
  .team__item .ph{aspect-ratio:16/9;margin-bottom:12px}
  .team__title{font-size:16px;margin-bottom:6px}
  .team__text{font-size:13px}

  /* 10. 全球展示：两列改单列，图更高 */
  .gallery2{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
  .gallery2 figcaption{padding-top:8px;font-size:12px}

  /* 11. 首屏：留白收紧，让第一屏能露出产品区开头（参考站首屏信息更密） */
  .hero__inner{padding:20px 0 24px;gap:16px}
  .hero__text{margin-bottom:16px;font-size:14px;line-height:1.65}
  /* 图墙只留一张两宫格，2×2 会把首屏撑到 800px 以上 */
  .hero__collage{gap:8px}
  .hero__collage .ph:nth-child(n+3){display:none}
  .hero__collage .ph{aspect-ratio:4/3}
  .hero__cta{gap:8px}
  .hero__cta .btn{flex:1 1 0;min-width:0;padding:13px 8px;font-size:12.5px}

  /* 12. 分栏区块（工厂 / 视频 / 地图）：间距收紧 */
  .split{gap:22px}
  .split__text p{font-size:14px;margin-bottom:14px}
  .split__media .caption{font-size:11px;padding:8px 12px}
  .mapbox{gap:24px}
  .mapbox__map,.mapbox iframe{min-height:220px}
  /* 地图占位块带 height:100% + 16:9，会按高度反算出 427px 宽撑出屏幕 */
  .mapbox__map .ph,.mapbox__map .ph--wide{
    aspect-ratio:auto!important;width:100%!important;height:100%!important;min-height:220px;
  }
  .infolist li{padding:11px 0}
  .infolist span{font-size:13px}

  /* 13. CTA 条 */
  .cta{padding:34px 0}
  .cta h2{font-size:22px}
  .cta p{font-size:13px}
  .cta__inner{gap:18px}
  .cta .btn,.cta__inner .btn{width:100%}

  /* 14. 页脚：单列，间距收紧 */
  .footer{padding:40px 0 0}
  .footer__grid{grid-template-columns:minmax(0,1fr)!important;gap:20px;padding-bottom:26px}
  .footer__desc{font-size:12.5px;max-width:none}
  .footer__links li{margin-bottom:8px}
  .footer__contact li{margin-bottom:10px;font-size:12.5px}
  .footer__bar{padding:14px 0;font-size:11px}
  .footer__bar-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .footer__legal{gap:14px;flex-wrap:wrap}

  /* 15. 内页：产品列表页（侧栏转横条后，产品同样单列行卡） */
  .withside{padding-top:18px;padding-bottom:40px;gap:14px}
  .side__list a{padding:8px 13px;font-size:12.5px}

  /* 16. 内页：产品详情 */
  .pdetail{padding:22px 11px 44px;gap:22px}
  .pdetail h1{font-size:24px;line-height:1.25}
  .pdetail__excerpt{font-size:14px;margin-bottom:18px}
  .pdetail__thumbs .ph{width:64px}
  .specs th,.specs td{padding:9px 0;font-size:12.5px}
  .specs th{width:40%}
  .pdetail__actions{gap:8px}
  .prose{font-size:14px;line-height:1.75}
  .prose h2{font-size:20px;margin:24px 0 10px}
  .prose h3{font-size:17px}

  /* 内页容器：这几个页面用内联 padding 写死了上下距，左右被清零，这里补回 */
  .pagewrap{padding:26px 11px 48px!important}

  /* 17. 内页：博客列表 */
  .bloggrid{grid-template-columns:minmax(0,1fr)!important;gap:18px}
  .postcard__body{padding:14px}
  .postcard__title{font-size:16px}
  .postcard__text{font-size:12.5px}

  /* 18. 内页：联系 / 单页 */
  .contact-layout{padding:26px 11px 48px;gap:26px}
  .contact-block h2{font-size:21px}
  .contact-block li{font-size:13px}
  .pagebody.prose{font-size:14.5px;line-height:1.8}
  .pagebody.prose h2{font-size:21px;margin:28px 0 12px}
  .faq__q{padding:16px 32px 16px 0;font-size:15px}
  .faq__a p{font-size:13px;padding-bottom:16px}

  /* 19. 面包屑与分页 */
  .breadcrumbs{font-size:11px;margin-bottom:12px}
}

/* --- 超窄屏（≤360px）：只做保底，不再塌成单列长龙 --- */
@media (max-width:360px){
  .strengths{grid-template-columns:minmax(0,1fr)!important}
  .certs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats,.stats--4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .h-sec{font-size:26px}
  .hero__title{font-size:28px}
}

/* ==========================================================================
   首页首屏轮播（尺寸对齐参考站 snrqi.com 实测）
   桌面：通栏 1920:616（≈3.12:1，1440 宽 → 462 高）
   手机：通栏  750:654（≈1.15:1， 390 宽 → 340 高），切换点同为 820px
   文案叠加在图上，底部圆点 + 左右箭头
   ========================================================================== */
.hslider{
  position:relative;background:#111;overflow:hidden;
  aspect-ratio:1920 / 616;
}
.hslider__track{position:absolute;inset:0}
.hslider__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(0);
  /* 切换效果对齐参考站：transform / opacity 各 0.5s ease-in，延迟 0.05s */
  transition:opacity .5s ease-in .05s, transform .5s ease-in .05s, visibility .5s ease-in .05s;
}
.hslider__slide.is-active{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
/* 退出的那张：淡出的同时轻微右移（参考站 animate_out_img_move 实测约 20px） */
.hslider__slide.is-leaving{visibility:visible;opacity:0;transform:translateX(20px);pointer-events:none}
.hslider__slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* 左侧暗化，保证浅色图上文字也读得清（参考站同样是深色压字） */
.hslider__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.5) 42%,rgba(10,10,10,.12) 72%,rgba(10,10,10,0) 100%);
}
.hslider__body{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;max-width:760px;
}
.hslider__eyebrow{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;opacity:.82;margin-bottom:14px;
}
.hslider__title{
  font-size:44px;line-height:1.12;letter-spacing:-.025em;color:#fff;margin-bottom:16px;
}
.hslider__text{
  font-size:15px;line-height:1.7;color:rgba(255,255,255,.86);max-width:560px;margin-bottom:28px;
}
.hslider__cta{display:flex;gap:12px;flex-wrap:wrap}
.hslider__cta .btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.hslider__cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 箭头 */
.hslider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  color:#fff;border-radius:50%;backdrop-filter:blur(4px);
  transition:background .2s ease;
}
.hslider__arrow:hover{background:rgba(255,255,255,.32)}
.hslider__arrow.is-prev{left:18px}
.hslider__arrow.is-next{right:18px}
.hslider__arrow svg{width:18px;height:18px}

/* 圆点 */
.hslider__dots{
  position:absolute;left:0;right:0;bottom:18px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.hslider__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.42);transition:background .3s ease,width .3s ease,border-radius .3s ease;
}
.hslider__dots button.is-active{background:#fff;width:22px;border-radius:5px}

@media (max-width:1080px){
  .hslider__title{font-size:34px}
  .hslider__text{max-width:480px}
}

@media (max-width:820px){
  /* 参考站手机端换成长图（750×654），这里同步换比例；
     画面变高后文案改为底部对齐，否则居中会显得很空 */
  .hslider{aspect-ratio:750 / 654}
  .hslider__slide::after{
    background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.2) 36%,rgba(10,10,10,.6) 100%),
               linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.18) 70%,rgba(10,10,10,0) 100%);
  }
  .hslider__body{max-width:none;justify-content:flex-end;padding-bottom:54px}
  .hslider__title{
    font-size:26px;line-height:1.22;margin-bottom:12px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hslider__text{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:14px;line-height:1.6;margin-bottom:18px;max-width:520px;
  }
  .hslider__eyebrow{font-size:11px;margin-bottom:8px}
  .hslider__cta .btn{padding:11px 20px;font-size:13px}
  .hslider__arrow{width:34px;height:34px}
  .hslider__arrow.is-prev{left:8px}
  .hslider__arrow.is-next{right:8px}
  .hslider__dots{bottom:18px}
}

@media (max-width:560px){
  .hslider__body{padding:0 18px 44px}
  .hslider__eyebrow{display:none}
  .hslider__title{font-size:22px;line-height:1.26;margin-bottom:10px;letter-spacing:-.01em}
  .hslider__text{font-size:13px;margin-bottom:16px}
  .hslider__cta{gap:8px;width:100%;max-width:340px}
  /* 窄屏两个按钮等分一行，避免 320px 时折行把标题顶到画面最上沿 */
  .hslider__cta .btn{flex:1 1 0;min-width:0;justify-content:center;padding:11px 8px;font-size:12.5px;line-height:1.1;white-space:nowrap}
  .hslider__arrow{display:none}
  .hslider__dots{bottom:14px;gap:6px}
  .hslider__dots button{width:7px;height:7px}
  .hslider__dots button.is-active{width:16px}
}