/* ============================================================
   ZHONGDA — landing
   ============================================================ */

:root{
  --ink:        #101418;
  --ink-2:      #171C22;
  --ink-3:      #232A32;
  --paper:      #FBFAF8;
  --paper-2:    #F2F0EB;
  --line:       #E3DFD7;
  --text:       #14181D;
  --muted:      #6A7076;
  --accent:     #9E2B3F;
  --accent-2:   #C0872C;
  --ok:         #2C7A5B;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --wrap: 1240px;
  --gut: 24px;

  --f-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-ser: "Playfair Display", Georgia, "Times New Roman", serif;

  --sh-s: 0 1px 2px rgba(16,20,24,.06), 0 4px 16px rgba(16,20,24,.05);
  --sh-m: 0 2px 6px rgba(16,20,24,.06), 0 16px 40px rgba(16,20,24,.09);
  --sh-l: 0 30px 80px rgba(16,20,24,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-sans);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; background:#E8E4DC; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.025em; font-weight:800; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.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{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- сетка ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- кнопки ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px;
  font:inherit; font-weight:700; font-size:15px; line-height:1.2;
  letter-spacing:-.01em;
  border:1.5px solid transparent; border-radius:999px;
  background:var(--btn-bg); color:inherit;
  cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ --btn-bg:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(158,43,63,.26); }
.btn--primary:hover{ --btn-bg:#852234; box-shadow:0 10px 26px rgba(158,43,63,.34); }

.btn--outline{ border-color:currentColor; color:inherit; }
.btn--outline:hover{ background:rgba(16,20,24,.06); }

.btn--ghost{ border-color:var(--line); background:#fff; }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--sm{ padding:9px 17px; font-size:13.5px; }
.btn--lg{ padding:16px 32px; font-size:16.5px; }
.btn--full{ width:100%; }

.btn[disabled]{ opacity:.62; pointer-events:none; }

.link{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; color:var(--accent);
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:gap .18s var(--ease), opacity .18s;
}
.link:hover{ gap:13px; opacity:.78; }

/* ---------- шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,248,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(16,20,24,.05); }

.hdr__in{ display:flex; align-items:center; gap:18px; min-height:70px; }

.logo{ display:block; flex:0 0 auto; }
.logo img{
  display:block; width:200px; height:auto;
  transition:opacity .18s;
}
.logo:hover img{ opacity:.82; }
.logo--ftr img{ width:260px; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav > a:not(.btn){
  padding:9px 9px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:#3A4046;
  white-space:nowrap;
  transition:color .16s, background .16s;
}
.nav > a:not(.btn):hover{ color:var(--text); background:rgba(16,20,24,.055); }
.nav__cta{ margin-left:8px; }

.hdr__side{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }

.burger{
  display:none; width:44px; height:44px; padding:0;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .26s var(--ease), opacity .18s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- типографика секций ---------- */
.band{ padding:clamp(64px,7.5vw,116px) 0; }
.band--tight{ padding-block:clamp(56px,6vw,90px); }
.band--alt{ background:var(--paper-2); }
.band--dark{ background:var(--ink); color:#EDEFF1; }
.band--dark img{ background:#1D232A; }
.band--form{ background:var(--ink-2); color:#EDEFF1; }

.eyebrow{
  margin:0 0 16px;
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--light{ color:#E0A9B4; }
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(158,43,63,.16);
}
.eyebrow--light .dot{ background:#E0A9B4; box-shadow:0 0 0 4px rgba(224,169,180,.2); }

.h2{ font-size:clamp(28px,3.6vw,50px); max-width:19ch; }
.h2--light{ color:#fff; }
.h2 em{ font-family:var(--f-ser); font-style:italic; font-weight:500; color:var(--accent); }
.h2--light em{ color:#E7B98B; }

.lede{ max-width:62ch; font-size:clamp(15.5px,.5vw + 14.5px,18px); color:var(--muted); }
.lede--light{ color:#A7AFB7; }

.band__head{ margin-bottom:clamp(34px,4vw,54px); max-width:760px; }
.band__head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:34px; flex-wrap:wrap; max-width:none;
}
.band__head--row > div{ max-width:720px; }
.band__head .h2{ margin-bottom:16px; }

.cap{ margin-top:18px; font-size:13.5px; color:var(--muted); max-width:78ch; }
.muted{ color:var(--muted); font-size:.94em; }

/* ---------- hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; background:#0B0E11; }
.hero__bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
/* верхний слой — обесцвеченное фото рынка, нижний — запасной */
#heroBgFabric{ opacity:.34; }
#heroBgMarket{
  opacity:.62;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 6% 10%, rgba(10,13,16,.9) 0%, rgba(10,13,16,.6) 45%, rgba(10,13,16,.34) 100%),
    linear-gradient(180deg, rgba(10,13,16,.52) 0%, rgba(10,13,16,.12) 38%, rgba(10,13,16,.86) 100%);
}

.hero__in{ padding-block:clamp(72px,10vw,150px) clamp(48px,6vw,80px); }

.hero__h1{
  font-size:clamp(34px,6.4vw,80px);
  line-height:1.04; letter-spacing:-.035em;
  max-width:19ch; margin-bottom:26px;
}
.hero__h1 em{
  font-family:var(--f-ser); font-style:italic; font-weight:500;
  letter-spacing:-.01em;
  color:#F0C48E;
}

.hero__lead{
  max-width:56ch; font-size:clamp(16px,.6vw + 14.5px,19.5px);
  color:#C9D0D6; margin-bottom:38px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:64px; }
.hero__cta .btn--outline{ color:#fff; }
.hero__cta .btn--outline:hover{ background:rgba(255,255,255,.12); }

.hero__facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; list-style:none; margin:0; padding:0;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m); overflow:hidden;
  backdrop-filter:blur(6px);
}
.hero__facts li{
  padding:22px 20px;
  background:rgba(16,20,24,.42);
  display:flex; flex-direction:column; gap:5px;
}
.hero__facts b{ font-size:clamp(24px,2.4vw,34px); font-weight:800; letter-spacing:-.03em; color:#fff; }
/* подпись — только прямой потомок li, чтобы не затирать цифры внутри <b> */
.hero__facts li > span{ font-size:13px; line-height:1.4; color:#AEB6BD; }

/* ---------- карточки рисков ---------- */
.cards{ display:grid; gap:22px; }
.cards--3{ grid-template-columns:repeat(3,1fr); }

.card{
  position:relative; padding:34px 28px 30px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); border-color:#D6D0C4; }
.card__num{
  display:block; margin-bottom:20px;
  font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--accent-2);
}
.card h3{ font-size:19.5px; margin-bottom:11px; letter-spacing:-.02em; }
.card p{ color:var(--muted); font-size:15px; }

/* ---------- направления ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }

.dir{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dir:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); }
.dir__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#DDD8CE; }
.dir__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.dir:hover .dir__media img{ transform:scale(1.045); }
.dir__badge{
  position:absolute; top:16px; left:16px;
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
  font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
}
.dir__body{ padding:30px 30px 34px; display:flex; flex-direction:column; flex:1; }
.dir__body h3{ font-size:clamp(22px,2vw,28px); margin-bottom:10px; }
.dir__body > p{ color:var(--muted); margin-bottom:20px; }
.dir__body .link{ margin-top:auto; align-self:flex-start; padding-top:22px; }

.ticks{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:11px; }
.ticks li{
  position:relative; padding-left:30px;
  font-size:15px; color:#434A51;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:17px; height:17px; border-radius:50%;
  background:rgba(158,43,63,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4.6 8.8l2.6 2.6 5.2-5.4' fill='none' stroke='%239E2B3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
}
.ticks--light li{ color:#BFC6CD; }
.ticks--light li::before{ background-color:rgba(231,185,139,.16); }

/* ---------- фильтры каталога ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
.chip{
  padding:9px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font:inherit; font-size:14px; font-weight:600; color:#414850;
  cursor:pointer; transition:all .18s var(--ease);
}
.chip:hover{ border-color:#C6BFB1; color:var(--text); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip__n{
  display:inline-block; margin-left:6px; padding:1px 7px;
  border-radius:999px; background:rgba(16,20,24,.07);
  font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.chip.is-active .chip__n{ background:rgba(255,255,255,.2); }

/* ---------- сетка тканей ---------- */
.grid-fab{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  min-height:300px;
}
.fab{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  background:#E2DED5; aspect-ratio:3/4;
  cursor:pointer; border:0; padding:0; display:block; width:100%;
  min-height:0; min-width:0; align-self:start;
  font:inherit; color:inherit; text-align:left;
  -webkit-appearance:none; appearance:none;
}
.fab picture{ display:block; width:100%; height:100%; }
.fab img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .65s var(--ease);
}
.fab:hover img{ transform:scale(1.07); }
.fab__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,14,0) 40%, rgba(10,12,14,.88) 100%);
  opacity:0; transition:opacity .3s var(--ease);
}
.fab:hover .fab__shade{ opacity:1; }
.fab__meta{
  position:absolute; left:0; right:0; bottom:0; padding:18px 16px 15px;
  color:#fff; text-align:left; pointer-events:none;
  transform:translateY(10px); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.fab:hover .fab__meta{ transform:translateY(0); opacity:1; }
.fab__name{ display:block; font-weight:800; font-size:15.5px; letter-spacing:-.01em; }
.fab__spec{ display:block; font-size:12.5px; color:#C6CDD3; margin-top:3px; }

.fab__tag{
  position:absolute; top:12px; left:12px;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(3px);
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
}

.skeleton{
  aspect-ratio:3/4; border-radius:var(--r-m);
  background:linear-gradient(100deg,#EDE9E1 30%,#F6F4EF 50%,#EDE9E1 70%);
  background-size:220% 100%;
  animation:sh 1.25s linear infinite;
}
@keyframes sh{ to{ background-position:-220% 0; } }

.grid-fab__more{ margin-top:30px; font-size:14.5px; color:var(--muted); text-align:center; }
.grid-fab__more a{ color:var(--accent); font-weight:700; border-bottom:1px solid currentColor; }

/* ---------- мозаика производства ---------- */
.mosaic{
  display:grid; gap:16px; margin-bottom:clamp(40px,5vw,64px);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(190px,auto);
}
.mosaic__i{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-m); background:#1D232A; }
.mosaic__i img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.mosaic__i:hover img{ transform:scale(1.06); }
.mosaic__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 14px;
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(180deg,rgba(10,12,14,0),rgba(10,12,14,.82));
}
.mosaic__i--big{ grid-column:span 2; grid-row:span 2; }

.checks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-m); overflow:hidden;
}.checks li{
  padding:26px 24px; background:rgba(255,255,255,.035);
  font-size:14.5px; color:#AEB6BD;
}
.checks b{ display:block; color:#fff; font-size:16.5px; font-weight:700; margin-bottom:6px; letter-spacing:-.015em; }

/* ---------- шаги ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  counter-reset:s;
}
.step{
  position:relative; padding:30px 24px 26px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  display:flex; flex-direction:column;
}
.step:not(:last-child)::after{
  content:""; position:absolute; top:46px; right:-13px; z-index:2;
  width:8px; height:8px; border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
.step__n{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:20px;
  background:var(--ink); color:#fff;
  font-size:15px; font-weight:800;
}
.step h3{ font-size:18px; margin-bottom:9px; }
.step p{ font-size:14.5px; color:var(--muted); }
.step__time{
  margin-top:auto; padding-top:18px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-2);
}

/* ---------- изделия ---------- */
.gar{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gar__i{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-m); aspect-ratio:4/3; background:#E2DED5;
}
.gar__i img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.gar__i:hover img{ transform:scale(1.06); }
.gar__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 16px 13px; color:#fff;
  font-size:14px; font-weight:700;
  background:linear-gradient(180deg,rgba(10,12,14,0),rgba(10,12,14,.8));
}

.note{
  margin-top:28px; padding:24px 28px;
  background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-s);
}
.note b{ display:block; margin-bottom:5px; font-size:16px; }
.note p{ color:var(--muted); font-size:15px; }
.note--row{ border-left-color:var(--accent-2); }

/* ---------- таблица логистики ---------- */
.table-wrap{
  overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--r-m); background:#fff;
  -webkit-overflow-scrolling:touch;
}
.table{ width:100%; border-collapse:collapse; min-width:620px; }
.table th,.table td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); }
.table thead th{
  background:var(--paper-2); font-size:11.5px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.table tbody th{ font-weight:700; font-size:15.5px; white-space:nowrap; }
.table td{ font-size:14.5px; color:var(--muted); }
.table tbody tr:last-child th,.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background .16s; }
.table tbody tr:hover{ background:#FAF9F6; }

.lg{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.lg__i{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-m); aspect-ratio:16/10; background:#E2DED5; }
.lg__i img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.lg__i:hover img{ transform:scale(1.06); }
.lg__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 16px 12px; color:#fff; font-size:13px; font-weight:600;
  background:linear-gradient(180deg,rgba(10,12,14,0),rgba(10,12,14,.8));
}

/* ---------- реквизиты ---------- */
.pay{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.pay__left .h2{ margin-bottom:18px; }
.pay__left .ticks{ margin-top:26px; }

.pay__card{
  padding:clamp(26px,3vw,36px);
  background:#fff; color:var(--text);
  border-radius:var(--r-l); box-shadow:var(--sh-l);
}
.pay__card h3{
  font-size:19px; padding-bottom:16px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.pay__lead{ font-size:15px; color:var(--muted); margin-bottom:22px; }
.pay__name{
  display:grid; gap:6px;
  padding:20px 22px; margin-bottom:20px;
  background:var(--paper-2); border-radius:var(--r-m);
  border-left:3px solid var(--accent);
}
.pay__name-cn{
  font-size:clamp(17px,1.5vw,21px); font-weight:800; letter-spacing:-.01em;
  line-height:1.35;
}
.pay__name-en{ font-size:13.5px; color:var(--muted); line-height:1.4; }

.kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:0; }
.kv dt{
  padding:11px 20px 11px 0; font-size:13.5px; color:var(--muted);
  white-space:nowrap; vertical-align:top;
}
.kv dd{
  margin:0; padding:11px 0; font-size:14.5px; font-weight:600;
  border-bottom:1px solid var(--paper-2);
  word-break:break-word;
}
.kv dt:last-of-type,.kv dd:last-of-type{ border-bottom:0; padding-bottom:0; }

.pay__hint{
  margin-top:0; padding:15px 17px;
  background:var(--paper-2); border-radius:var(--r-s);
  font-size:13.5px; color:var(--muted);
}
.pay__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pay__act .btn--outline{ border-color:var(--line); }
.pay__act .btn--outline:hover{ border-color:var(--ink); }

/* ============================================================
   блок про рынок Zhongda
   ============================================================ */
.band--zd{ background:linear-gradient(180deg,#F7F3EC 0%, #FBFAF8 100%); }

.zd{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,68px); align-items:start;
}
.zd__left .h2{ margin-bottom:18px; }
.zd__left .ticks{ margin-top:26px; }
.zd__left .ticks li{ color:#3F464D; }
.zd__left .ticks b{ color:var(--text); }

.zd__quote{
  margin-top:26px; padding:18px 22px;
  background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--accent-2); border-radius:var(--r-s);
  font-size:14.5px; color:var(--muted);
}

.zd__right{ display:grid; gap:18px; }

.zd__badge{
  display:grid; gap:2px; padding:26px 28px;
  background:var(--ink); color:#fff; border-radius:var(--r-l);
  position:relative; overflow:hidden;
}
.zd__badge::after{
  content:"中大"; position:absolute; right:-6px; bottom:-26px;
  font-size:112px; font-weight:800; line-height:1;
  color:rgba(255,255,255,.05); pointer-events:none;
}
.zd__badge b{
  font-size:clamp(38px,4.4vw,54px); font-weight:800;
  letter-spacing:-.04em; line-height:1; color:#F0C48E;
}
.zd__badge span{ font-size:13px; color:#A7AFB7; }

.stats{
  margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden;
}
.stats > div{ padding:18px 20px; background:#fff; }
.stats dt{
  font-size:clamp(20px,2vw,26px); font-weight:800;
  letter-spacing:-.03em; color:var(--accent); line-height:1.1;
}
.stats dd{
  margin:5px 0 0; font-size:13px; color:var(--muted); line-height:1.4;
}

.zd__timeline{
  margin:0; padding:0; list-style:none;
  display:grid; gap:0; counter-reset:zdt;
  border-left:2px solid var(--line); margin-left:9px;
}
.zd__timeline li{
  position:relative; padding:0 0 22px 26px;
  display:grid; gap:3px;
}
.zd__timeline li:last-child{ padding-bottom:0; }
.zd__timeline li::before{
  content:""; position:absolute; left:-7px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--accent);
}
.zd__timeline b{
  font-size:13px; font-weight:800; letter-spacing:.04em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.zd__timeline span{ font-size:14px; color:#4A5158; line-height:1.5; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa > summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-size:clamp(16px,.5vw + 15px,19px); font-weight:700; letter-spacing:-.02em;
  transition:color .18s;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary:hover{ color:var(--accent); }
.qa > summary::after{
  content:""; flex:0 0 auto;
  width:13px; height:13px;
  border-right:2.2px solid var(--accent); border-bottom:2.2px solid var(--accent);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .26s var(--ease);
}
.qa[open] > summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.qa__body{ padding:0 44px 24px 4px; }
.qa__body p{ color:var(--muted); max-width:76ch; }

/* ---------- форма ---------- */
.lead-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,60px); align-items:start; }
.lead__left .h2{ margin-bottom:18px; }
.lead__contact{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-m); overflow:hidden; }
.lead__contact li{ padding:20px 24px; background:rgba(255,255,255,.04); display:grid; gap:3px; }
.lead__contact span{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8F98A1; }
.lead__contact b{ font-size:13px; color:#8F98A1; font-weight:600; }
.lead__contact a{ font-size:18px; font-weight:700; color:#fff; letter-spacing:-.015em; }
.lead__contact a:hover{ color:#F0C48E; }

.form{
  padding:clamp(26px,3vw,38px);
  background:#fff; color:var(--text);
  border-radius:var(--r-l); box-shadow:var(--sh-l);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:#4B525A;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px;
  font:inherit; font-size:15.5px; color:var(--text);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-s);
  transition:border-color .16s, background .16s, box-shadow .16s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:104px; }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A7076' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:44px; cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3.5px rgba(158,43,63,.11);
}
.field input::placeholder,.field textarea::placeholder{ color:#A8AEB4; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#C0392B; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.check{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px; cursor:pointer; }
.check input{
  flex:0 0 auto; width:19px; height:19px; margin:2px 0 0;
  accent-color:var(--accent); cursor:pointer;
}
.check span{ font-size:13px; color:var(--muted); line-height:1.45; }

.spinner{
  display:none; width:17px; height:17px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.32); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.is-busy .spinner{ display:block; }
.is-busy .btn__lbl{ opacity:.75; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form__msg{ margin:14px 0 0; font-size:14px; font-weight:600; min-height:1em; }
.form__msg.is-ok{ color:var(--ok); }
.form__msg.is-err{ color:#C0392B; }
.form__msg a{ text-decoration:underline; }

/* ---------- подвал ---------- */
.ftr{ background:var(--ink); color:#9AA3AB; padding:clamp(50px,6vw,78px) 0 30px; }
.ftr__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:36px; padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.logo--ftr{ color:#fff; margin-bottom:16px; }
.logo--ftr .logo__mark{ color:#E7B98B; }
.logo--ftr .logo__txt i{ color:#7E868E; }
.ftr__brand p{ font-size:14.5px; max-width:40ch; }

.ftr__col{ display:flex; flex-direction:column; gap:11px; }
.ftr__col h4{
  font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#6E767E; margin-bottom:5px;
}
.ftr__col a{ font-size:14.5px; transition:color .16s; width:fit-content; }
.ftr__col a:hover{ color:#fff; }
.ftr__muted{ font-size:13px; color:#6E767E; }

.ftr__bot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:24px; font-size:13px; color:#6E767E;
}

/* ---------- плавающая связь ---------- */
.dock{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; gap:11px;
}
.fab__b{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh-m);
  transition:transform .2s var(--ease), background .2s, color .2s;
}
.fab__b svg{ width:25px; height:25px; }
.fab__b:hover{ transform:translateY(-3px) scale(1.04); }
.fab__b--tg{ background:var(--accent); color:#fff; border-color:transparent; }
.fab__b--tg:hover{ background:#852234; }

/* ---------- модалка WeChat ---------- */
.modal{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center; padding:20px;
  background:rgba(10,13,16,.68); backdrop-filter:blur(6px);
}
.modal[hidden]{ display:none; }
.modal__bx{
  position:relative; width:100%; max-width:400px; padding:34px 28px 28px;
  background:#fff; border-radius:var(--r-l); box-shadow:var(--sh-l);
  text-align:center;
  animation:pop .3s var(--ease);
}
@keyframes pop{ from{ transform:scale(.94) translateY(10px); opacity:0; } }
.modal__x{
  position:absolute; top:12px; right:14px;
  width:36px; height:36px; border:0; border-radius:50%;
  background:var(--paper-2); color:var(--muted);
  font-size:24px; line-height:1; cursor:pointer; transition:background .16s,color .16s;
}
.modal__x:hover{ background:var(--line); color:var(--ink); }
.modal__bx h3{ font-size:21px; margin-bottom:8px; }
.modal__bx > p{ font-size:14.5px; color:var(--muted); margin-bottom:20px; }
.modal__qr{
  width:196px; height:196px; margin:0 auto 18px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
}
.modal__num{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:20px; }
.modal__act{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.modal__bx--wide{ max-width:760px; text-align:left; }

/* ---------- карточка ткани в модалке ---------- */
.light{ display:grid; grid-template-columns:.95fr 1.05fr; gap:0; }
.light__media{
  border-radius:var(--r-m) 0 0 var(--r-m); overflow:hidden;
  background:#E2DED5; min-height:260px;
}
.light__media img{ width:100%; height:100%; object-fit:cover; }
.light__body{ padding:30px 28px; }
.light__cat{
  margin:0 0 8px; font-size:11.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent-2);
}
.light__body h3{ font-size:23px; margin-bottom:10px; }
.light__spec{ font-size:14.5px; color:var(--muted); margin-bottom:14px; }
.light__price{
  font-size:19px; font-weight:800; letter-spacing:-.02em;
  color:var(--accent); margin-bottom:18px;
}
.light__note{
  font-size:13.5px; color:var(--muted);
  padding-top:16px; border-top:1px solid var(--line);
  margin-bottom:20px;
}

@media (max-width:680px){
  .light{ grid-template-columns:1fr; }
  .light__media{ border-radius:var(--r-m) var(--r-m) 0 0; aspect-ratio:4/3; min-height:0; }
  .light__body{ padding:22px 20px 24px; }
}

/* ---------- появление при скролле ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   адаптив
   ============================================================ */
@media (max-width:1120px){
  .nav{ display:none; }
  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:fixed; inset:70px 0 auto 0; z-index:99;
    padding:18px var(--gut) 26px;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:var(--sh-m); max-height:calc(100dvh - 70px); overflow-y:auto;
  }
  .nav.is-open > a:not(.btn){ padding:13px 6px; font-size:16px; border-bottom:1px solid var(--paper-2); border-radius:0; white-space:normal; }
  .nav__cta{ margin:14px 0 0; }
  .burger{ display:block; }
  .hdr__side .btn--primary{ display:none; }

  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:not(:last-child)::after{ display:none; }
  .checks{ grid-template-columns:repeat(2,1fr); }
  .zd{ grid-template-columns:1fr; }
  .zd__right{ order:-1; }         /* цифры о рынке — раньше длинного текста */
}

@media (max-width:960px){
  .hero__facts{ grid-template-columns:repeat(2,1fr); }
  .cards--3{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .grid-fab{ grid-template-columns:repeat(3,1fr); }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(170px,auto); }
  .mosaic__i--big{ grid-column:span 2; grid-row:span 1; }
  .gar{ grid-template-columns:repeat(2,1fr); }
  .lg{ grid-template-columns:1fr; }
  .pay{ grid-template-columns:1fr; }
  .lead-wrap{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  :root{ --gut:18px; }
  .band__head--row{ flex-direction:column; align-items:flex-start; }
  .band{ padding:56px 0; }
  .band--tight{ padding-block:48px; }

  /* логотип и шапка */
  .hdr__in{ gap:12px; min-height:64px; }
  .logo img{ width:158px; }
  .logo--ftr img{ width:220px; }
  .hdr__side .btn--ghost{ padding:9px 13px; font-size:13px; }
  .nav.is-open{ inset:64px 0 auto 0; max-height:calc(100dvh - 64px); }

  /* hero */
  .hero__in{ padding-block:52px 40px; }
  .hero__h1{ font-size:clamp(29px,8.4vw,40px); margin-bottom:20px; }
  .hero__lead{ font-size:16px; margin-bottom:30px; }
  .hero__cta{ margin-bottom:40px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__facts{ grid-template-columns:1fr 1fr; }
  .hero__facts li{ padding:15px 13px; }
  .hero__facts b{ font-size:clamp(20px,5.6vw,26px); }
  .hero__facts span{ font-size:11.5px; line-height:1.35; }

  /* рынок Zhongda */
  .zd__badge{ padding:22px; }
  .zd__badge b{ font-size:40px; }
  .zd__quote{ padding:16px 18px; }
  .zd__timeline{ margin-left:8px; }
  .zd__timeline li{ padding-bottom:18px; padding-left:22px; }
  .stats > div{ padding:15px 16px; }

  /* сетки */
  .grid-fab{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .mosaic{ grid-template-columns:1fr; }
  .mosaic__i--big{ grid-column:span 1; }
  .gar{ grid-template-columns:1fr 1fr; gap:12px; }
  .steps{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }
  .card{ padding:26px 22px 24px; }
  .dir__body{ padding:24px 22px 26px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .ftr__top{ grid-template-columns:1fr; gap:28px; }

  /* реквизиты */
  .pay__name{ padding:17px 18px; }

  /* плавающие кнопки на телефоне убираем: они дублируют нижнюю панель
     и при этом наезжают на текст */
  .dock{ display:none; }

  .qa__body{ padding-right:8px; }
  .lead__contact a{ font-size:16.5px; }
  .table th,.table td{ padding:13px 14px; }
}

/* ---------- нижняя панель заявки (только телефон) ---------- */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,250,248,.94);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(16,20,24,.08);
}
.cta-bar .btn{ flex:1 1 auto; padding:13px 16px; font-size:15px; }
.cta-bar__wc{
  flex:0 0 52px; width:52px; height:50px; padding:0;
  display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.cta-bar__wc svg{ width:24px; height:24px; }

@media (max-width:680px){
  .cta-bar{ display:flex; }
  /* страница не должна уходить под панель */
  .ftr{ padding-bottom:calc(30px + 74px + env(safe-area-inset-bottom)); }
}

@media (max-width:420px){
  .grid-fab{ grid-template-columns:repeat(2,1fr); }
  .gar{ grid-template-columns:1fr 1fr; }
  .filters{ gap:7px; }
  .chip{ padding:8px 13px; font-size:12.5px; }
  .logo img{ width:142px; }
  /* на узком экране в шапке WeChat не помещается — он есть в нижней панели */
  .hdr__side .btn--ghost{ display:none; }
  .logo__mark{ width:30px; height:30px; }
  .logo__txt b{ font-size:15.5px; }
  .logo__txt i{ font-size:9.5px; }
  .hdr__in{ gap:12px; }
}