/* ============================================================================
   Xinyu Heavy Industry — site styles
   Palette and type are derived from the printed catalogue: deep navy, the
   logo's engineering blue, and the equipment amber used on the machines.
   ========================================================================= */

:root{
  --ink:        #0A1526;
  --ink-2:      #0F2038;
  --ink-3:      #16304F;
  --brand:      #1F6FD0;
  --brand-lt:   #4A93E8;
  --brand-dp:   #114E96;
  --amber:      #F2A81D;
  --paper:      #FFFFFF;
  --mist:       #F5F8FC;
  --mist-2:     #EAF0F8;
  --line:       rgba(10,21,38,.10);
  --line-lt:    rgba(255,255,255,.14);
  --body:       #3C4A5E;
  --muted:      #6B7C93;
  --muted-lt:   rgba(233,240,250,.72);

  --ease:       cubic-bezier(.22,1,.36,1);
  --ease-soft:  cubic-bezier(.4,0,.2,1);
  --dur:        .62s;

  --wrap:       1240px;
  --pad:        clamp(20px, 5vw, 56px);
  --r-sm:       10px;
  --r:          18px;
  --r-lg:       28px;
  --hdr-h:      74px;

  --shadow-sm:  0 1px 2px rgba(10,21,38,.06), 0 4px 14px rgba(10,21,38,.05);
  --shadow:     0 2px 4px rgba(10,21,38,.05), 0 18px 44px rgba(10,21,38,.10);
  --shadow-lg:  0 4px 10px rgba(10,21,38,.06), 0 40px 90px rgba(10,21,38,.16);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 18px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.68;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:680;
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--brand-lt);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px;
  transition:top .25s var(--ease-soft);
}
.skip:focus{ top:14px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ─────────────────────────── scroll progress ─────────────────────────── */
.progress{
  position:fixed; inset:0 0 auto; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-lt) 55%,var(--amber));
  transition:width .12s linear;
}

/* ─────────────────────────────── header ─────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--hdr-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease-soft),
             box-shadow .45s var(--ease-soft),
             backdrop-filter .45s var(--ease-soft),
             border-color .45s var(--ease-soft),
             height .45s var(--ease-soft);
  border-bottom:1px solid transparent;
}
.hdr__in{ display:flex; align-items:center; gap:clamp(16px,3vw,44px); }

.hdr.is-stuck{
  height:62px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 34px rgba(10,21,38,.07);
}

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{
  width:auto; height:34px;
  transition:height .45s var(--ease-soft);
}
.hdr.is-stuck .brand__mark{ height:29px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.06; }
.brand__txt b{
  font-size:15px; font-weight:760; letter-spacing:.14em; color:var(--ink);
  transition:color .4s var(--ease-soft);
}
.brand__txt i{
  font-style:normal; font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted); transition:color .4s var(--ease-soft);
}

.nav{ display:flex; align-items:center; gap:clamp(6px,1.4vw,26px); }
.nav a{
  position:relative; padding:9px 2px; font-size:14.5px; font-weight:520;
  letter-spacing:.005em; white-space:nowrap;
  transition:color .35s var(--ease-soft);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px;
  background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }

.hdr__cta{ display:flex; align-items:center; gap:12px; }

/* language switch */
.lang{
  position:relative; display:flex; align-items:center; gap:2px;
  padding:3px; border-radius:100px; flex:none;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  transition:background .45s var(--ease-soft), border-color .45s var(--ease-soft);
}
.lang button{
  position:relative; z-index:1;
  padding:7px 14px; border:0; border-radius:100px; background:none;
  font-size:12.5px; font-weight:650; letter-spacing:.04em; cursor:pointer;
  color:rgba(255,255,255,.7);
  transition:color .4s var(--ease-soft), transform .4s var(--ease);
}
.lang button:hover{ color:#fff; }
.lang button:active{ transform:scale(.95); }
.lang button.is-on{ color:#fff; }
.lang__ink{
  position:absolute; top:3px; left:0; height:calc(100% - 6px);
  border-radius:100px; background:rgba(255,255,255,.2);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  transition:transform .52s var(--ease), width .52s var(--ease);
  will-change:transform,width;
}
.hdr.is-stuck .lang,.hdr.is-light .lang{
  background:rgba(10,21,38,.05); border-color:var(--line);
}
.hdr.is-stuck .lang button,.hdr.is-light .lang button{ color:var(--muted); }
.hdr.is-stuck .lang button:hover,.hdr.is-light .lang button:hover{ color:var(--ink); }
.hdr.is-stuck .lang button.is-on,.hdr.is-light .lang button.is-on{ color:var(--ink); }
.hdr.is-stuck .lang__ink,.hdr.is-light .lang__ink{
  background:rgba(10,21,38,.09); box-shadow:none;
}

/* burger */
.burger{
  display:none; width:42px; height:42px; padding:0;
  background:none; border:0; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:20px; height:1.8px; border-radius:2px;
  background:currentColor;
  transition:transform .5s var(--ease), opacity .3s var(--ease-soft);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* header colours over the dark hero vs. over light sections */
.hdr{ color:#fff; }
.hdr .brand__txt b{ color:#fff; }
.hdr .brand__txt i{ color:rgba(255,255,255,.66); }
.hdr.is-stuck,
.hdr.is-light{ color:var(--ink); }
.hdr.is-stuck .brand__txt b,.hdr.is-light .brand__txt b{ color:var(--ink); }
.hdr.is-stuck .brand__txt i,.hdr.is-light .brand__txt i{ color:var(--muted); }

/* ──────────────────────────────── buttons ──────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 27px; border-radius:100px;
  font-size:14.5px; font-weight:600; letter-spacing:.008em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:transform .45s var(--ease), background .4s var(--ease-soft),
             color .4s var(--ease-soft), border-color .4s var(--ease-soft),
             box-shadow .45s var(--ease-soft);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--solid{
  background:var(--brand); color:#fff;
  box-shadow:0 8px 26px rgba(31,111,208,.34);
}
.btn--solid:hover{ background:var(--brand-dp); box-shadow:0 14px 36px rgba(31,111,208,.42); }

.btn--ghost{
  border-color:rgba(255,255,255,.34); color:#fff;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.13); }

.sec--mist .btn--ghost,.sec .btn--ghost.on-light{
  border-color:var(--line); color:var(--ink); background:transparent;
}
.sec--mist .btn--ghost:hover{ border-color:var(--brand); color:var(--brand); background:rgba(31,111,208,.05); }

.btn--sm{ padding:11px 20px; font-size:13.5px; }

/* ───────────────────────────────── hero ───────────────────────────────── */
.hero{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding-top:calc(var(--hdr-h) + clamp(38px,5.2vw,74px));
  padding-bottom:clamp(26px,3.4vw,48px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(31,111,208,.42), transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(31,111,208,.20), transparent 62%),
    linear-gradient(168deg,#0A1526 0%,#0C1C33 46%,#0A1526 100%);
}
/* the catalogue's diagonal streak motif, rebuilt in CSS */
.hero__streak{
  position:absolute; left:-6%; right:-6%; height:clamp(120px,17vw,230px);
  background:linear-gradient(90deg,rgba(31,111,208,0) 0%,rgba(31,111,208,.55) 28%,rgba(74,147,232,.85) 62%,rgba(31,111,208,.35) 100%);
  transform:rotate(-13deg);
  filter:blur(.4px);
  opacity:.5;
}
.hero__streak--1{ top:16%; }
.hero__streak--2{ top:52%; height:clamp(70px,9vw,120px); opacity:.22; transform:rotate(-13deg) translateX(9%); }
.hero__glow{
  position:absolute; right:-8%; top:24%;
  width:min(760px,72vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(74,147,232,.34),transparent 62%);
  filter:blur(30px);
}

.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding-bottom:clamp(22px,3vw,44px);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand-lt); margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:currentColor; border-radius:2px;
  opacity:.8;
}
.sec--mist .eyebrow,.sec:not(.sec--ink) .eyebrow{ color:var(--brand); }

.hero h1{
  color:#fff;
  font-size:clamp(34px,4.5vw,61px);
  font-weight:700;
  letter-spacing:-.038em;
  line-height:1.04;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--brand-lt),#8FC2FF 60%,var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  margin-top:26px;
  max-width:46ch;
  font-size:clamp(15.5px,.5vw + 14.4px,18px);
  line-height:1.72;
  color:rgba(226,236,250,.78);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__tag{
  margin-top:30px; font-size:12.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:rgba(200,216,238,.6);
}
.hero__tag span{ color:var(--amber); margin-inline:4px; }

/* product "stage" */
.stage{
  position:relative; margin:0;
  border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,30px);
  background:linear-gradient(150deg,#FFFFFF 0%,#EEF4FC 58%,#E2ECF9 100%);
  box-shadow:0 40px 90px rgba(4,12,26,.5), 0 2px 0 rgba(255,255,255,.6) inset;
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.stage::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(255,255,255,.5);
}
.stage:hover{ transform:translateY(-6px); box-shadow:0 52px 110px rgba(4,12,26,.58); }
.stage img{ width:100%; border-radius:calc(var(--r-lg) - 12px); }
.stage figcaption{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(10,21,38,.10);
}
.stage__model{
  font-size:20px; font-weight:760; letter-spacing:-.02em; color:var(--ink);
}
.stage__meta{ font-size:13px; color:var(--muted); }

/* stats */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2vw,28px);
  margin-top:clamp(6px,1.5vw,18px);
  padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--line-lt);
}
.stats li{ display:flex; flex-direction:column; gap:3px; }
.stats b{
  font-size:clamp(20px,2.1vw,27px); font-weight:720; letter-spacing:-.026em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.stats span{ font-size:12.5px; color:rgba(196,212,234,.62); letter-spacing:.03em; }

/* ─────────────────────────────── marquee ─────────────────────────────── */
.strip{
  background:var(--ink-2);
  border-top:1px solid var(--line-lt);
  overflow:hidden;
  padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.strip__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:slide 42s linear infinite;
}
.strip__track span{
  font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(190,208,232,.66); white-space:nowrap;
}
.strip__track i{
  width:5px; height:5px; border-radius:50%; background:var(--brand); opacity:.85;
  flex:none;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ─────────────────────────────── sections ─────────────────────────────── */
.sec{ padding:clamp(72px,9vw,132px) 0; }
.sec--mist{ background:var(--mist); }
.sec--ink{ background:var(--ink); color:rgba(226,236,250,.76); }
.sec--ink h2,.sec--ink h3{ color:#fff; }

.h2{ font-size:clamp(29px,3.7vw,46px); }
.h3{ font-size:clamp(23px,2.3vw,30px); }

.sechead{ max-width:760px; margin-bottom:clamp(38px,5vw,62px); }
.sechead__lede{ margin-top:20px; font-size:clamp(15.5px,.4vw + 14.6px,17.5px); max-width:62ch; }
.sechead--light .sechead__lede{ color:rgba(214,228,246,.7); }

/* ──────────────────────────────── about ──────────────────────────────── */
.about{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(34px,5vw,80px); align-items:stretch;
}
.about__copy p{ margin-top:20px; }
.about__copy blockquote{
  margin:32px 0 0; padding:22px 26px;
  border-left:2px solid var(--brand);
  background:#fff; border-radius:0 var(--r) var(--r) 0;
  font-size:15.5px; line-height:1.72; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.about__copy cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:12.5px; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
}

.caps{ display:grid; gap:14px; align-content:space-between; }
.caps li{
  display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto;
  column-gap:16px; align-items:center;
  padding:20px 22px; background:#fff; border-radius:var(--r);
  border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease-soft);
}
.caps li:hover{
  transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent;
}
.caps svg{
  grid-row:span 2; width:44px; height:44px; padding:11px;
  fill:none; stroke:var(--brand); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  background:rgba(31,111,208,.08); border-radius:12px;
}
.caps b{ font-size:15px; font-weight:660; color:var(--ink); letter-spacing:-.012em; }
.caps span{ font-size:13.5px; line-height:1.55; color:var(--muted); }

.loc{
  margin-top:clamp(34px,4.5vw,58px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px); align-items:center;
  padding:clamp(24px,3vw,34px);
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.loc__head{ display:flex; gap:15px; align-items:flex-start; }
.loc__pin{
  flex:none; width:11px; height:11px; margin-top:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 6px rgba(242,168,29,.16);
}
.loc__head b{ display:block; font-size:16.5px; font-weight:670; color:var(--ink); letter-spacing:-.014em; }
.loc__head span{ font-size:13.5px; color:var(--muted); }
.loc__links{ display:flex; flex-wrap:wrap; gap:9px; }
.loc__links li{
  font-size:13px; font-weight:560; color:var(--ink-2);
  padding:8px 15px; border-radius:100px;
  background:var(--mist-2); border:1px solid transparent;
  transition:background .4s var(--ease-soft), color .4s var(--ease-soft), transform .4s var(--ease);
}
.loc__links li:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }

/* ─────────────────────────────── products ─────────────────────────────── */
.tablist{
  position:relative;
  display:flex; flex-wrap:wrap; gap:6px;
  padding:6px; border-radius:100px;
  background:var(--mist-2);
  margin-bottom:clamp(28px,3.5vw,44px);
  width:max-content; max-width:100%;
}
.tablist button{
  position:relative; z-index:1;
  padding:12px 22px; border:0; border-radius:100px; background:none;
  font-size:14px; font-weight:600; letter-spacing:.004em;
  color:var(--muted); cursor:pointer; white-space:nowrap;
  transition:color .45s var(--ease-soft), transform .45s var(--ease);
}
.tablist button:hover{ color:var(--ink); }
.tablist button.is-on{ color:#fff; }
.tablist button:active{ transform:scale(.97); }
.tablist__ink{
  position:absolute; top:6px; left:0; height:calc(100% - 12px);
  border-radius:100px; background:var(--ink);
  box-shadow:0 8px 22px rgba(10,21,38,.24);
  transition:transform .62s var(--ease), width .62s var(--ease);
  will-change:transform,width;
}

.panel{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4.5vw,66px); align-items:start;
}
.panel[hidden]{ display:none; }
.panel.is-entering{ animation:panelIn .62s var(--ease) both; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.panel__media{ display:grid; gap:14px; }
.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r); background:#fff;
  border:1px solid var(--line);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.shot img{
  width:100%; padding:clamp(10px,1.6vw,20px);
  transition:transform .8s var(--ease);
}
.shot:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.shot:hover img{ transform:scale(1.035); }
.shot--wide img{ padding:clamp(14px,2vw,26px); }
.shot figcaption{
  position:absolute; left:16px; bottom:14px;
  padding:7px 14px; border-radius:100px;
  font-size:12px; font-weight:620; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line);
}
.panel__thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.panel__lede{ margin-top:16px; font-size:clamp(15.5px,.4vw + 14.6px,17px); max-width:52ch; }

.feat{ margin-top:26px; display:grid; gap:13px; }
.feat li{
  position:relative; padding-left:30px; font-size:14.8px; line-height:1.62;
}
.feat li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:9px; height:9px; border-radius:2px;
  background:linear-gradient(135deg,var(--brand),var(--brand-lt));
  transform:rotate(45deg);
}
.panel__opt{
  margin-top:24px; padding:15px 20px;
  font-size:14px; border-radius:var(--r-sm);
  background:rgba(31,111,208,.06);
  border-left:2px solid var(--brand);
  color:var(--ink-2);
}
.panel__opt b{
  display:inline-block; margin-right:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chips li{
  padding:9px 16px; border-radius:100px;
  font-size:13px; font-weight:580; color:var(--ink-2);
  background:var(--mist-2);
  transition:background .4s var(--ease-soft), color .4s var(--ease-soft), transform .4s var(--ease);
}
.chips li:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

.hosegrid{
  margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.hosegrid div{
  background:#fff; padding:15px 18px;
  display:flex; flex-direction:column; gap:2px;
  transition:background .4s var(--ease-soft);
}
.hosegrid div:hover{ background:var(--mist); }
.hosegrid b{ font-size:14px; font-weight:640; color:var(--ink); }
.hosegrid span{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ──────────────────────── export / trade services ──────────────────────── */
.trade{ background:var(--paper); padding-bottom:clamp(66px,8vw,104px); }
.trade__in{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.trade__item{
  background:#fff; padding:clamp(22px,2.6vw,32px);
  display:grid; gap:9px; align-content:start;
  transition:background .5s var(--ease-soft);
}
.trade__item:hover{ background:var(--mist); }
.trade__item svg{
  width:26px; height:26px; margin-bottom:4px;
  fill:none; stroke:var(--brand); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.trade__item b{
  font-size:15.5px; font-weight:660; color:var(--ink); letter-spacing:-.014em;
}
.trade__item span{ font-size:13.5px; line-height:1.58; color:var(--muted); }

/* ──────────────────────────────── specs ──────────────────────────────── */
.specs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px); align-items:start;
}
.spec{
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line-lt);
  padding:clamp(22px,2.4vw,32px);
  transition:transform .6s var(--ease), border-color .6s var(--ease-soft), background .6s var(--ease-soft);
}
.spec:hover{
  transform:translateY(-5px); border-color:rgba(122,174,238,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
}
.spec--hero{
  border-color:rgba(242,168,29,.42);
  background:linear-gradient(180deg,rgba(242,168,29,.10),rgba(255,255,255,.03));
  box-shadow:0 30px 70px rgba(0,0,0,.3);
}
.spec--hero:hover{ border-color:rgba(242,168,29,.72); }
.spec__head{ padding-bottom:20px; border-bottom:1px solid var(--line-lt); }
.spec__tag{
  display:inline-block; margin-bottom:13px;
  padding:5px 12px; border-radius:100px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-lt); background:rgba(74,147,232,.16);
}
.spec__tag--amber{ color:#F7C761; background:rgba(242,168,29,.18); }
.spec__head h3{
  font-size:clamp(25px,2.3vw,32px); color:#fff; letter-spacing:-.03em;
}
.spec__head small{
  display:block; margin-top:5px;
  font-size:12.5px; font-weight:520; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(190,208,232,.6);
}
.spec__list{ margin-top:6px; }
.spec__list div{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.spec__list div:last-child{ border-bottom:0; }
.spec__list dt{ font-size:13.5px; color:rgba(190,208,232,.72); flex:none; max-width:52%; }
.spec__list dd{
  font-size:13.8px; font-weight:600; color:#fff; text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:-.006em;
}
.specnote{
  margin-top:clamp(28px,3.5vw,44px);
  font-size:12.5px; line-height:1.7; color:rgba(176,196,222,.55);
  max-width:70ch;
}

/* ─────────────────────────────── quality ─────────────────────────────── */
.quality{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(34px,5vw,76px); align-items:center;
}
.quality__copy p{ margin-top:20px; }
.ticks{ margin-top:28px; display:grid; gap:12px; }
.ticks li{
  position:relative; padding-left:32px; font-size:14.8px; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.36em;
  width:19px; height:19px; border-radius:50%;
  background:rgba(31,111,208,.12);
}
.ticks li::after{
  content:""; position:absolute; left:6.5px; top:.62em;
  width:5px; height:9px;
  border:solid var(--brand); border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg);
}
.certs{
  margin:0; position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transition:transform .7s var(--ease);
}
.certs:hover{ transform:translateY(-5px) rotate(-.4deg); }
.certs img{ width:100%; padding:clamp(16px,2.2vw,28px); }
.certs figcaption{
  padding:14px 22px 18px;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--line);
}

/* ─────────────────────────────── contact ─────────────────────────────── */
.contact__in{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(34px,5vw,80px); align-items:center;
}
.contact__copy > p{ margin-top:20px; max-width:48ch; }
.contact__list{
  margin-top:38px; display:grid; gap:1px;
  background:var(--line-lt); border:1px solid var(--line-lt);
  border-radius:var(--r); overflow:hidden;
}
.contact__list div{
  background:rgba(255,255,255,.035); padding:20px 24px;
  display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:baseline;
  transition:background .4s var(--ease-soft);
}
.contact__list div:hover{ background:rgba(255,255,255,.075); }
.contact__list dt{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-lt);
}
.contact__list dd{ font-size:15px; color:#fff; line-height:1.6; }
.contact__list a{
  position:relative; transition:color .35s var(--ease-soft);
}
.contact__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.contact__list a:hover{ color:var(--brand-lt); }
.contact__list a:hover::after{ transform:scaleX(1); }
.cn{ font-size:13.5px; color:rgba(190,208,232,.72); letter-spacing:.06em; }

.contact__acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

.qr{
  margin:0; padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r-lg); background:#fff;
  box-shadow:var(--shadow-lg);
  text-align:center;
  transition:transform .7s var(--ease);
}
.qr:hover{ transform:translateY(-5px); }
.qr img{ width:min(240px,100%); margin-inline:auto; }
.qr figcaption{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}

/* ─────────────────────────────── footer ─────────────────────────────── */
.ftr{
  background:#08111F; color:rgba(176,196,222,.6);
  padding:clamp(44px,5vw,68px) 0 clamp(30px,3.5vw,42px);
  border-top:1px solid var(--line-lt);
}
.ftr__in{ display:grid; gap:28px; }
.ftr__brand{ display:flex; align-items:center; gap:14px; }
.ftr__brand img{ width:auto; height:40px; }
.ftr__brand span{ display:flex; flex-direction:column; line-height:1.34; }
.ftr__brand b{ font-size:14.5px; font-weight:660; color:#fff; letter-spacing:-.01em; }
.ftr__brand i{ font-style:normal; font-size:12.5px; letter-spacing:.08em; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,32px); }
.ftr__nav a{
  font-size:14px; position:relative; transition:color .35s var(--ease-soft);
}
.ftr__nav a:hover{ color:#fff; }
.ftr__note{ font-size:12.5px; line-height:1.8; letter-spacing:.06em; }
.ftr__note span{ color:rgba(150,170,198,.5); }

/* ─────────────────────────────── reveals ─────────────────────────────── */
/* Reveal animations are OPT-IN: they only apply once the head script has added
   `.js` to <html>. If scripts are blocked, fail to load, or throw, nothing is
   ever hidden — the page (and every product photo) stays fully visible. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* Last-resort rescue: anything still unrevealed after 9s becomes visible anyway. */
.js [data-reveal]:not(.is-in){ animation:revealRescue .7s var(--ease) 9s forwards; }
@keyframes revealRescue{ to{ opacity:1; transform:none; } }

/* ─────────────────────────────── responsive ─────────────────────────────── */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .stage{ max-width:640px; }
  .about,.quality,.contact__in{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr; }
  .spec--hero{ order:-1; }
  .panel{ grid-template-columns:1fr; }
  .trade__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qr{ max-width:380px; margin-inline:auto; }
}

@media (max-width:860px){
  :root{ --hdr-h:64px; }
  .burger{ display:block; }
  .hdr .btn--sm{ display:none; }

  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:stretch; justify-content:center;
    gap:2px; padding:0 var(--pad);
    background:rgba(10,21,38,.97);
    -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
    color:#fff;
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease-soft), visibility .5s var(--ease-soft);
  }
  .nav.is-open{ opacity:1; visibility:visible; z-index:-1; }
  .nav a{
    font-size:clamp(24px,6vw,34px); font-weight:680; letter-spacing:-.028em;
    padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
    opacity:0; transform:translateY(18px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .nav.is-open a{ opacity:1; transform:none; }
  .nav.is-open a:nth-child(1){ transition-delay:.06s; }
  .nav.is-open a:nth-child(2){ transition-delay:.11s; }
  .nav.is-open a:nth-child(3){ transition-delay:.16s; }
  .nav.is-open a:nth-child(4){ transition-delay:.21s; }
  .nav.is-open a:nth-child(5){ transition-delay:.26s; }
  .nav a::after{ display:none; }

  .hdr.is-menu .brand__txt b{ color:#fff; }
  .hdr.is-menu .brand__txt i{ color:rgba(255,255,255,.66); }
  .hdr.is-menu{ color:#fff; }
  .hdr.is-menu .brand__mark{ filter:brightness(1.5); }
  /* while the overlay is open the bar must go transparent, otherwise the
     stuck (white) header would paint over the dark menu */
  .hdr.is-menu,
  .hdr.is-menu.is-stuck{
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:none; border-bottom-color:transparent;
  }
  .hdr.is-menu .lang{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
  .hdr.is-menu .lang button{ color:rgba(255,255,255,.7); }
  .hdr.is-menu .lang button.is-on{ color:#fff; }
  .hdr.is-menu .lang__ink{ background:rgba(255,255,255,.2); }

  .stats{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .loc{ grid-template-columns:1fr; }
  .tablist{
    width:100%; border-radius:var(--r); padding:5px;
    overflow-x:auto; flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .tablist::-webkit-scrollbar{ display:none; }
  .tablist button{ padding:11px 17px; font-size:13px; }
  .tablist__ink{ display:none; }
  .tablist button.is-on{ background:var(--ink); }
  .contact__list div{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:520px){
  .panel__thumbs{ grid-template-columns:1fr; }
  .hero__acts .btn,.contact__acts .btn{ flex:1 1 auto; }
  .stage figcaption{ gap:6px; }
  .trade__in{ grid-template-columns:1fr; }
  .lang button{ padding:7px 11px; font-size:12px; }
}

/* ────────────────────────────── reduced motion ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .strip__track{ animation:none; }
}